Динамическое отображение изображений из файла json, путь к которому хранится в react js

#javascript #json #reactjs

Вопрос:

Я создал файл json, в котором я сохраняю заголовок, содержимое и URL-адрес для значков svg, которые я использую в компоненте React для отображения пользовательского интерфейса. К сожалению, каким-то образом изображения не отображаются, отображается остальная информация, хранящаяся в файле json yes. Не могли бы вы помочь мне указать, что я делаю не так? Ниже вы найдете скриншот моего дерева проекта, часть моего файла json и код, который я использую для визуализации пользовательского интерфейса с данными, хранящимися в файле json.

Menu.js код компонента:

     import React from 'react'
import { Container, Row, Col } from 'reactstrap';
import menuTiles from '../files/menuTiles.json';
import '../styles/style.css';
function Menu(){
    return (
        <main>
            <div className="container fluid">
                <div className="row justify-content-center"><h3>Scegli il menu oppure cercha qui per categorie</h3></div>
                <div className="div-menu-style">
                    {
                        menuTiles.map((menuDetail,index)=>{
                            return(
                                <div key={menuDetail.id}>
                                <a className="link-style" href="#">
                                    <div className="tile-style row">
                                    <div col="3"><img className="img-style"src={menuDetail.imgSrc} /></div>
                                    <div col="9">
                                    <h4>{menuDetail.title}</h4>
                                    <p>{menuDetail.content}</p>
                                    </div>
                                    </div>
                                </a>
                            </div>
                            )
                            
                        })
                    }
                </div>
            </div>
        </main>
    )
}
export default Menu

1. Скорее всего, маршруты к изображениям неверны. Когда вы переходите http://localhost:3000/musical-notes.svg , можете ли вы увидеть изображение? Я думаю, вам было бы лучше определить сопоставление для изображений, где key — это его имя, а value — изображение. Затем в вашем json вы можете сохранить ключ, а при рендеринге просто найдите его на карте и передайте изображение в тег img

2. Правильный ли путь к изображению? Если вы проверите HTML, правильно ли указан src img, и может ли ваш браузер перейти к этому URL-адресу изображения?

3. Когда я перехожу на указанный вами URL-адрес, я не вижу изображений. В инструментах разработчика я вижу, что атрибут src равен <img class=»img-style» src=»./musical-notes.svg»>

Ответ №1:

значки svg и каталог файлов находятся на разных уровнях. итак, вы должны получить доступ к каталогу значков из каталога файлов следующим ./icons/musical-notes.svg образом. измените так.

 { imageSrc: "./icons/musical-notes.svg" }