React组件从JSON渲染图片无法显示，请求排查原因

问题场景 #

在React组件中从JSON文件渲染商品列表时，标题、价格等文本内容均正常显示，但图片加载失败。相关代码如下：

组件代码 #

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"}
]

可能的原因及解决方法 #

1. 相对路径未被webpack正确解析 #

React项目中，webpack会处理src目录下的静态资源，但直接从JSON中读取的相对路径（如./img/xxx.jpg）不会被webpack解析，浏览器会将其视为相对于当前页面URL的路径，导致资源找不到。

解决方法：

• 方法一：将图片移至项目根目录的public文件夹下（如public/img），同时修改JSON中的路径为根相对路径：

  "img": "/img/guitar-yamaha.jpg"
  

• 方法二：在组件中使用require动态引入图片，同时修改JSON只存文件名（如"img":"guitar-yamaha.jpg"）：

  <img className='product__image' src={require(`../img/${el.img}`)} alt={el.title} />
  

2. 文件路径或文件名错误 #

检查JSON中的路径与实际文件系统的路径是否完全匹配：

• 注意拼写错误：比如JSON中的yamaha-violence.jpg可能是笔误（小提琴应为violin），导致找不到对应文件；
• 注意大小写：Windows系统不区分文件名大小写，但Linux/macOS及线上服务器区分，确保文件名大小写一致；
• 检查目录层级：组件文件在src/components/Product.js，JSON在src/data/data.json，那么../img/xxx.jpg对应的是src/img/xxx.jpg，确认该目录下确实存在对应图片。

3. 图片资源未被正确打包 #

如果图片放在src目录下，但webpack配置未对图片格式（如jpg、png）做处理，会导致资源未被打包到输出目录。不过使用create-react-app初始化的项目默认已配置好图片处理，自定义webpack配置时需确保添加了对应的loader（如file-loader或url-loader）。

4. img标签写法不规范 #

React中img标签应为自闭合格式，虽然浏览器可能兼容非自闭合写法，但规范写法可避免潜在问题：

<img className='product__image' src={...} alt={el.title} />

同时建议添加alt属性，提升页面可访问性。

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