React：如何通过列表动态渲染图像映射？答案

【问题标题】：React: How can I dynamically render images mapping through a list?React：如何通过列表动态渲染图像映射？
【发布时间】：2017-09-19 20:12:04
【问题描述】：

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

我的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 并且它是，但图像仍然没有加载。如果我用存储在 json 中的实际路径替换 {this.props.imgUrl}，图像将加载。我已经在这个问题上搜索了几个小时，但无法到达任何地方，也无法实施其他人用于解决类似问题的解决方案。

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

编辑：好吧，我一直很愚蠢，我前段时间复制了图像文件夹（在 src 中，移动到公共），但是用我的路径访问了 src 中的那个。从那以后，我将其更改为公开的，一切正常。谢谢大家的帮助。

【问题讨论】：

在获取 url 时尝试使用console.log，可能发生了某些事情，img 无法正确获取属性
检查您的浏览器控制台。您的代码可能正在运行，但由于其他原因无法加载图像。
尝试将member.imgUrl替换为this.imgUrl
我不是 100% 确定我已经完成了你的要求，但我只是在 img 元素之前和之后添加了一个 {console.log(this.props.imgUrl)} 并且它返回了正确的字符串。
@Sergey 我在 Staff 中使用了 console.log() 来检查，字符串使用 member.imgUrl 可以正常工作，但是使用 this.imgUrl 我得到 'undefined'

标签： javascript json reactjs

【解决方案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

【讨论】：

这与编译无关。这就像一个 JS 代码执行，它应该只放置一个 URL 并且浏览器应该加载它。这不是在 JS 中为 webpack 包含图像。我认为它不适用于这种情况。

【解决方案2】：

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

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

【讨论】：