javascript - 从 json 源导入图像 (create-react-app)

Question

我有一些带有数据的 json，其中一个参数是带有图像的本地文件夹的路径:

// data.json
[
  {
    "id": 1,
     "image": "assets/somepic.png"
  },
  {
    "id": 2,
     "image": "assets/anotherpic.png"
  }
  // similar data goes there
]

然后我将这些数据导入我的组件

import data from "data.json"

我想通过这些数据映射:

render() {
  return (
     data.map((item) => (
       // Ofc it won't work if I just put {item.image} in src,
       // because we need to import image before use it
       // that's why I'm trying to use require
       <img src={require(item.image)} />
     ))
  )
}

但它不会起作用。create-react-app 的 json 数据中指定了本地补丁，如何使用图片？

请注意:不应弹出应用。

Answer 1

检查 create-react-app 是否将 Webpack 配置为开箱即用地捆绑图像(.png 检查 webpack.config.js)。如果是这样，如果 assets 与组件位于同一文件夹中，那么您似乎只是缺少一个以“./assets/anotherpic.png”开头的相对路径。