React打包后图片无法加载问题求助

图片存储在public > img目录下，图片链接配置于src > data > data.json文件中。执行build命令生成生产构建包后，目标组件内的图片无法正常加载，修改文件路径后问题仍未解决，怀疑是路径配置方式有误。

相关代码 #

Shop.jsx #

import React, { useState } from 'react';
import './Instruments.css';
import Cart from '../components/Cart'
import Product from '../components/Product'
import cart from '../img/cart.png';
import data from "../data/data.json";
import OfferForm from '../components/OfferForm';

function Shop() {
    const [value, setValue] = useState('');
    const [currentData, setCurrentData] = useState(data);
    const [modalActive, modalSetActive] = useState(false);
    const [cartList, setCartList] = useState([]);
    const [offerDoneActive, setOfferDoneActive] = useState(false);

    return (
        <div className='wrapper'>
            <div className='shop'>
                <div className='container'>
                    <div className='shop__main'>
                        <div className='shop__main-products'>
                            {
                                currentData.filter((el) => {
                                    return value.toLowerCase() === '' ? el : el.title.toLowerCase().includes(value.toLowerCase())
                                }).map((el, index) => {
                                    return (
                                        <Product img={el.img} title={el.title} price={el.price} key={el.id} addToCart={() => setCartList([...cartList, el])}/>
                                    )
                                })
                            }
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Shop;

Product.jsx #

import React, { useState } from 'react';
import './Product.css';

function Product({img, title, price, id, type, addToCart}) {
    return (
                <div className='product' key={id} type={type}>
                    <div className='buy__top'>
                        <div className='product__top-image-background'>
                            <img className='product__top-image' src={img}></img>
                        </div>
                        <h3 className='product__top-title'>{title}</h3>
                    </div>
                    <div className='product__buy'>
                        <h3 className='product__buy-price'>{price} грн</h3>
                        <button className='product__buy-button' onClick={addToCart}>В корзину</button>
                    </div>
                </div>
            )
}

export default Product;

Data.json #

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

问题原因及解决方法 #

• 核心问题：data.json中部分图片路径未使用绝对路径（缺少开头的/）。在React生产环境中，public目录是静态资源的根目录，资源路径必须以/开头才能正确指向根目录下的文件；相对路径会基于当前页面路由解析，导致图片找不到。
• 修复步骤：
  1. 修改data.json中所有图片路径，统一为以/开头的绝对路径：

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

  2. 重新执行npm run build（或yarn build）生成生产包，验证图片加载是否正常。

内容的提问来源于stack exchange，提问作者user20743167