从JSON中传递图像路径

Question

我在图像文件夹中有图像，我想通过json文件将路径传递到图像标签。如何做到这一点？

我的Json文件（serviceDetails）：

[{
    "id": 1,
    "ServiceImage": "../assets/images/officeCleaning.jpg",
}]

“我的组件”中的图片标签：

<img src={require({serviceDetails.ServiceImage})} />

Answer 1

首先，我希望您在Webpack或任何构建工具配置文件中都有正确的json-loader设置。然后：

将您的json更改为此：

{
 "id": 1,
 "ServiceImage": "../assets/images/officeCleaning.jpg"
}

并按如下所示使用它：

import serviceDetails from './serviceDetails.json';

<img src={require(serviceDetails.ServiceImage)} />

但是如果它是一个数组，则在下面使用：

<img src={require(serviceDetails[0].ServiceImage)} />

Answer 2

您可以将内容json文件导入一个变量中，然后使用它

import ListImages from 'path_json_file'

在组件中：

<img src={ListImages[0].ServiceImage} />