Как прочитать файл json из моей папки sr c в моем приложении реакции с помощью webpack-dev-server? - PullRequest
Новая
       31

Как прочитать файл json из моей папки sr c в моем приложении реакции с помощью webpack-dev-server?

0 голосов
/ 19 апреля 2020

machine. json: 

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

Мне нужно прочитать imageUrl сверху json объекта и добавить его в тег src из img, чтобы увидеть изображение на интерфейсе. Файл реагирования: 

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;

После рендеринга этого компонента я получаю испорченное изображение.

1 Ответ

0 голосов
/ 19 апреля 2020

Отсутствует объяснение в вопросе, но в целом:

Вам необходимо импортировать json файл: 

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

и: 

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

Надежда это помогает.

...