我似乎无法在使用 create-react-app 创建的 React 应用程序中显示图像。 这是我的目录结构:
build
node_modules
public
src
assets
components
header
ImportingComponent.js
data
data.js
css
图像的路径存在于 data.js
文件的数据目录中的一个对象中
import asdfgProfile from "../assets/IMG_20181128_182110.jpg";
import zxcvbProfile from "../assets/38492604_10157553680894256_362213635956670464_n.jpg";
const f =[
{
"name": "asdfg",
"thumbnail": {asdfgProfile}
},
{
"name": "zxcvb",
"thumbnail": {zxcvbProfile}
}
];
export default founders;
这是调用它的组件中的代码,
{props.founders.map( item =>
<div className="firstFounder">
<img src={(item.thumbnail)}></img>
<h2>{item.name}</h2>
<h3> {item.designation}</h3>
<p>{item.blurb}</p>
</div>
)}
图像似乎没有呈现。我在这里做错了什么。
最佳答案
const f =[
{
"name": "asdfg",
"thumbnail": {asdfgProfile}
},
{
"name": "zxcvb",
"thumbnail": {zxcvbProfile}
}
];
从 {zxcvbProfile}
、{asdfgProfile}
中删除括号,您正在创建一个 thumbnail:{ }
对象,而不是提供值.
关于javascript - 在 React 中渲染图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54834780/