如何使用webpack-dev服务器从react应用程序中的src文件夹中读取json文件

Question

machine.json:

[
{
"id": "1",
"name": "Test",
"imageUrl": "../images/panda.jpg"
}
]

我必须从上面的json对象中读取imageUrl，并将其添加到img标签的src中，才能在UI上看到图像。React文件：

import React, { useEffect, useState } from 'react'
import machineList from '../../resources/data/machine.json';
const Home = props => {
return (
<div className='home-component'>
{machineList.map(machine => {
return (<div className="card-wrapper" key={machine.id}>
<img src={machine.imageUrl} className="image" />
<div className="name">{machine.name}</div>
</div>)
})}
</div>
)
}
export default Home;

渲染这个组件后，我得到了破碎的图像。

Answer 1

问题中缺少解释，但通常为：

您必须导入json文件：

import images from './json-file-path'

和：

<img src={images[0].imageUrl}></img>

希望能有所帮助。