从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)} />
     ))
  )
}

但这样行不通。 我怎样才能使用在json数据中指定了本地路径的图片来创建create-react-app应用程序？

请注意：应用程序不应该被eject。

- WebArtisan

---

尝试使用forEach而不是map。 - pavi2410

不，它不起作用。 - WebArtisan

你还需要将img标签包裹在一个div标签中。 - pavi2410

那我为什么需要它呢？ - WebArtisan

Answer 1

检查一下create-react-app是否已经默认配置了Webpack来打包图片（.png文件请查看webpack.config.js）。如果是这样的话，那么你只需要一个相对路径，像这样 './assets/anotherpic.png'，前提是assets文件夹和组件在同一个文件夹中。

- spakmad

---

create-react-app 只为已弹出应用程序生成 webpack 文件。 - WebArtisan

assets/anotherpic.png 不是Webpack定义下的相对路径。它可能在你的模块中寻找该文件。https://webpack.js.org/concepts/module-resolution/#relative-paths - spakmad

Answer 2

确保从`require`正确的路径加载。你的图片不在`assets/anotherpic.png`，也许你应该从绝对路径`./assets/anotherpic.png`加载。

- xargr

Answer 3

如果你使用Webpack v4，你尝试过使用require.context()吗？

它允许你传入一个要搜索的目录，一个标志表示是否应该搜索子目录，以及一个正则表达式来匹配文件。

请参阅webpack文档中的源代码

你的代码可能是这样的：

data.json

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

file.js

const pathToAssets = require.context('assets/');

...

render() {
  return (
     data.map((item) => (
       <img src={pathToAssets(item.image)} />
     ))
  )
}

- Jérémie Boulay