我有一些带有数据的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指定了本地补丁的图像?
请注意:应用程序不应弹出。
答案 0 :(得分:0)
检查create-react-app
是否已配置Webpack以便将图像打包(.png检查webpack.config.js
)。如果是这样的话,如果assets
与组件位于同一文件夹中,则似乎只缺少一个以'./assets/anotherpic.png'开头的相对路径。
答案 1 :(得分:0)
确保来自负载的负载需要正确的路径。您的照片不在assets/anotherpic.png
上,也许您应该从绝对路径./assets/anotherpic.png
加载
答案 2 :(得分:0)
如果您使用Webpack v4,是否尝试使用/etc/hosts
?
它允许您传递要搜索的目录,指示是否也应搜索子目录的标志以及用于匹配文件的正则表达式。
See the source into the webpack documentation
您的代码可以是这样的:
data.json
require.context()
file.js
[
{
"id": 1,
"image": "somepic.png"
},
{
"id": 2,
"image": "anotherpic.png"
}
// similar data goes there
]