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

IT技术 reactjs create-react-app
2021-05-06 02:17: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 文件中循环出数据：“Adam”中的图片效果很好，并显示在页面上，但这不是图片的存储位置。我在 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 是我拥有图片的文件夹

1个回答

图像需要是静态可分析的，所以你需要require它们。请参阅此了解更多背景信息。

因此，在上面的示例中，不是使用文件而是使用每个图像的 require 语句json创建一个people.js文件：

// 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})` />
  )
}
其它你可能感兴趣的问题
上一篇使用 Marlin 固件时，是否可以在插入 SD 卡时自动运行 G 代码脚本？ 下一篇react-router默认路由重定向到 /home