JSON文件路径中引用的React backgroundImage看起来很奇怪答案

【问题标题】：React backgroundImage referenced in JSON file path seem weirdJSON文件路径中引用的React backgroundImage看起来很奇怪
【发布时间】：2017-06-23 17:18:38
【问题描述】：

我的应用是用 create-react-app 创建的，

我通过存储图像本地路径的 JSON 文件使用 .map 进行迭代，但我假设 create-react-app 以某种方式更改了路径，但我不明白如何。

const list = this.state.people.map((d, i) => { return <li
    key={i}
    className="content"
    style={{ backgroundImage: `url(${d.Picture})` }}
    >

上面是我的开始 li 标签，我从下面的 JSON 文件中循环出数据： “亚当”中的图片效果很好，并显示在页面上，但这不是图片的存储位置。我在 chrome 开发工具中找到了该路径，所以我只是复制粘贴。

下面“Bob”中的示例是 img 的实际路径（从根目录）我希望能够将我所有的图像放在图像文件夹中并将正确的路径存储在 JSON 文件中

{
  "Name": "Adam",
  "Born": 1971,
  "Picture": "/static/media/elonmusk.3489bce1.jpg"
},

{
  "Name": "Bob",
  "Born": 1999,
  "Picture": "/src/css/images/elonmusk.jpg"
},

上面是我的文件夹结构，App.js 是我渲染数据的地方，persons.json 是我存储文件路径的地方，images 是我保存图片的文件夹

【问题讨论】：

标签： reactjs create-react-app

【解决方案1】：

图像需要可静态分析，因此您需要require 它们。请参阅此了解更多background 信息。

因此，在上面的示例中，不要使用 jsonfile 创建 people.js 文件，而是像这样为每个图像添加 require 语句：

// file: people.js

const people = [
  {
    id: 0,
    name: 'Adam',
    born: 1971,
    picture: require('../path/to/image.jpg')
  },
  {
    id: 1,
    name: 'Bob',
    born: 1999,
    picture: require('../path/to/image2.jpg')
  }
]

然后您可以映射此信息以生成 jsx，然后您的图像将呈现。

const people = require('../path/to/people.js')

renderPeopleList () {
  return people.map(p =>
    <div key={p.id} style={{ backgroundImage: `url(${p.picture})` />
  )
}

【讨论】：