Question

我正在尝试通过一系列对象进行映射。

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

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

使用

将其带入我的主App.js文件

import data from './data.json';

并传递给组件：

<Home data={data.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中移动，移动到公共场所）但是在我的路径中访问src中的那个。我已经将它改为公众所有的工作。感谢大家的帮助。

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

Answer 2

除非您将图像放在公共文件夹中，否则无法解决，但修复相对简单。

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

React：如何通过列表动态呈现图像映射？

2 个答案: