React.js-从函数中的URL读取图像

Question

我正在研究一个项目，该项目从json文件读取对象，然后显示此数据。

我正在尝试向每个对象显示图像，因此我将密码保存在json文件中，如下所示：

"image": "../camera.png"

然后我使用地图函数读取对象并显示它。

items.map(eachitem => {
*..//code statments*
eachitem.image=require(eachitem.image)
});

这是错误：

未捕获的错误：找不到模块'../ camera.png'

我确定路径是正确的，因为在将其放入json文件之前，它可以正常工作，所以有什么帮助吗？

json文件路径：“ C：/Users/Admin/Projects/planner/demo/src/itemsData.json”

图像路径：“ C：/Users/Admin/Projects/planner/demo/src/catalog/items-catalog/item1.png”

Answer 1

首先导入json对象

import ItemsData from '../path/to/file/itemsData.json'

循环时，循环遍历ItemsData对象。

ItemsData.map(item => {
 // item.image gives you the img url
});