时间戳

首页 > 解决方案 > 如何使用 webpack-dev-server 从我的反应应用程序中的 src 文件夹中读取 json 文件？

reactjs - 如何使用 webpack-dev-server 从我的反应应用程序中的 src 文件夹中读取 json 文件？

问题描述

机器.json：

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

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

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;

渲染此组件后，我得到了损坏的图像。

标签： reactjsreact-hookswebpack-dev-serverwebpack-4

解决方案

在问题中缺少解释，但总的来说：

您必须导入您的 json 文件：

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

和：

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

希望能帮助到你。

推荐阅读