在 React 中渲染图像

Question

我似乎无法在使用 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>
 )}

图像似乎无法呈现。我在这里做错了什么。

Answer 1

const f =[
    {
        "name": "asdfg",
        "thumbnail": {asdfgProfile}
    },
    {
        "name": "zxcvb",
        "thumbnail": {zxcvbProfile}
    }

];

从 {zxcvbProfile}、{asdfgProfile} 中删除括号，您正在创建 thumbnail: { } 对象，而不是提供值。

在 React 中渲染图像

Rendering images in React

javascript

reactjs

create-react-app