在反應組件中渲染來自 json 文件的圖像

Question

除了圖片，其他都渲染的很完美，不知為何不顯示，請問是什么原因？

有以下組件：

import React from 'react';
import data from '../data/data.json';
import './Product.css';

function Product() {
        return (
            <div className='block'>
                {data.map((el) => {
                    return (
                        <div className='product' key={el.id}>
                            <img className='product__image' src={el.img}></img>
                            <h3 className='product__title'>{el.title}</h3>
                            <h3 className='product__price'>{el.price}</h3>
                            <button className='product__button'>В корзину</button>
                        </div>
                    )
                })}
            </div>
        )
}

export default Product;

json：

[
    {"id":1,"title":"Гитара Yamaha", "price":"6500", "img":"./img/guitar-yamaha.jpg"},
    {"id":2,"title":"Гитара Fender", "price":"7300", "img":"./img/guitar-fender.jpg"},
    {"id":3,"title":"Скрипка Yamaha", "price":"16000", "img":"./img/yamaha-violence.jpg"},
    {"id":4,"title":"Скрипка Cervini", "price":"4200", "img":"./img/violence-cervini.jpg"},
    {"id":5,"title":"Саксофон Yamaha", "price":"45000", "img":"./img/saxophone-yamaha.jpg"},
    {"id":6,"title":"Барабаны Yamaha", "price":"30000", "img":"./img/drums-yamaha.jpg"}
]

Answer 1

如果您的圖片文件夾在公用文件夾中，您可以這樣做：

 <img src='/img/image.jpg' />

刪除點. 在 json 圖像路徑中並嘗試這樣。

[
  {"id":1,"title":"Гитара Yamaha", "price":"6500", "img":"/img/guitar-yamaha.jpg"},
  {"id":2,"title":"Гитара Fender", "price":"7300", "img":"/img/guitar-fender.jpg"},
  {"id":3,"title":"Скрипка Yamaha", "price":"16000", "img":"/img/yamaha-violence.jpg"},
  {"id":4,"title":"Скрипка Cervini", "price":"4200", "img":"/img/violence-cervini.jpg"},
  {"id":5,"title":"Саксофон Yamaha", "price":"45000", "img":"/img/saxophone-yamaha.jpg"},
  {"id":6,"title":"Барабаны Yamaha", "price":"30000", "img":"/img/drums-yamaha.jpg"}
]