React组件从JSON读取图片路径后无法加载问题排查求助

问题分析 #

你从JSON文件读取图片相对路径，通过React循环渲染img标签时无法加载图片，核心问题通常集中在路径错误、React静态资源解析规则或文件存在性这几个方面，以下是具体排查步骤和解决办法：

1. 统一并校验相对路径 #

你的JSON中图片路径层级不一致：

[
  {"image": "../../assets/images/hotel_2.jpg"},
  {"image": "../assets/images/city_2.webp"}
]

相对路径的基准是当前React组件文件的位置，比如如果CityListItem.js位于src/components/目录：

• ../assets/images/xxx 表示向上一级（到src/）再进入assets/images/，是正确路径
• ../../assets/images/xxx 会跳出src/目录，导致资源找不到

解决：将JSON中所有图片路径统一为符合组件位置的相对路径，比如全部改为../assets/images/xxx。

2. 适配React静态资源解析规则 #

在React（尤其是Create React App脚手架）中，直接使用字符串相对路径可能无法被webpack正确打包解析，需要通过require或import引入资源：

方法一：在渲染时用require加载 #

修改组件的img标签：

{cityList.map((city) => (
  <div key={city.name} className='cityList__item'>
    <img src={require(city.image)} alt={city.name} />
  </div>
))}

方法二：预处理JSON数据 #

导入JSON时统一处理路径，确保webpack能解析：

import React from 'react';
import PropTypes from 'prop-types';
import cityData from './path/to/your/cityList.json'; // 替换为你的JSON路径

CityListItem.propTypes = {
  cityList: PropTypes.array,
};

CityListItem.defaultProps = {
  cityList: [],
};

function CityListItem(props) {
  // 预处理路径，提取文件名后用require加载
  const processedCityList = cityData.map(city => ({
    ...city,
    image: require(`../assets/images/${city.image.split('/').pop()}`)
  }));

  return (
    <>
      {processedCityList.map((city) => (
        <div key={city.name} className='cityList__item'>
          <img src={city.image} alt={city.name} />
        </div>
      ))}
    </>
  );
}
export default CityListItem;

3. 校验文件存在性与命名 #

• 检查assets/images/目录下是否存在hotel_2.jpg、city_2.webp、city_3.webp文件
• 注意文件名大小写（Linux/macOS系统区分大小写，比如City_2.webp和city_2.webp是不同文件）
• 确认文件后缀正确（比如.jpg和.jpeg不能混用）

4. 生产环境构建路径适配 #

如果是生产构建后出现问题，Create React App会将静态资源打包到build/static/media/并添加哈希后缀，此时可以使用process.env.PUBLIC_URL适配：

// 假设图片放在public/assets/images/目录下
<img src={`${process.env.PUBLIC_URL}/assets/images/${city.image.split('/').pop()}`} alt={city.name} />

同时需要将assets/images目录移到项目根目录的public文件夹下。

内容的提问来源于stack exchange，提问作者Manh Cuong 1996