javascript - react : How can I dynamically render images mapping through a list?

Question

我正在尝试映射一组对象。

我的 json 中 staff 中的每个数组元素都有一个 imgUrl:

{
    "home": {
        ...
        "staff": [
            {
                ...
                "imgUrl": "../Images/Jon.JPG",
                ...
            },
            ...
        ],
        ...
    }
    ...
}

这是带入我的主要 App.js 文件的

import data from './data.json';

并传递给一个组件:

<Home data={data.home} />

在 Home 中我有:

let staff = this.props.data.staff.map((member, i) => {
    return (
        <Staff imgUrl={member.imgUrl} />
    );

然后在 Staff 中我尝试加载图像:

<img src={this.props.imgUrl} alt={this.props.name} />

但这不起作用，显示了 alt。我检查过是否将正确的字符串传递给了 src，但图像仍未加载。如果我将 {this.props.imgUrl} 替换为存储在 json 中的实际路径，图像将加载。我已经围绕这个问题搜索了几个小时，但一无所获，也无法实现其他人用于解决类似问题的解决方案。

我使用 create-react-app 来启动这个项目。

编辑:好吧，我一直很愚蠢，我刚才复制了 Images 文件夹(它在 src 中，移动到公共(public))但是用我的路径访问了 src 中的那个。从那以后，我将其更改为公共(public)的，一切正常。感谢大家的帮助。

Answer 1

如果您没有将图像导入 JS 文件，即

import logo from './logo.png'; // Tell Webpack this JS file uses this image

你应该使用public文件夹

render() {
  // Note: this is an escape hatch and should be used sparingly!
  // Normally we recommend using `import` for getting asset URLs
  // as described in “Adding Images and Fonts” above this section.
  return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}

参见:

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder