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

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

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

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

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

下面“Bob”中的示例是 img 的实际路径（从根目录） 我希望能够将所有图像放入 images 文件夹中，并将正确的路径存储在 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 是我存放图像的文件夹

图像需要可静态分析，因此您需要require他们。更多请参考这个背景 https://github.com/facebook/react-native/issues/7015#issuecomment-217390058 info.

因此，对于上面的示例，不要使用json文件创建一个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})` />
  )
}