React JS中如何显示从JSON文件读取的图片？不显示问题如何解决

问题根因 #

你当前写法中的item.path是纯字符串格式的相对路径，存在两个问题：

1. React的构建工具（Webpack/Vite等）不会将动态传入的字符串路径识别为需要打包的资源依赖，对应的图片文件不会被打包到最终的产物目录中
2. 运行时字符串相对路径会按照当前页面的URL进行解析，不会按照组件文件的相对位置解析，和开发时的目录结构不匹配

修复方案 #

方案1：动态引入资源（推荐） #

Webpack/CRA项目适用

1. 修改brand1.js的路径配置，仅保留资源标识片段：

let brand1 = [
{
    "id": 1,
    "title": "Herringbone",
    "path": 'brand1/34-SAU028A.jpg'
}
]
export default brand1

2. 渲染时用require包裹动态路径，必须保留固定前缀让工具识别资源范围：

import brand1 from './assets/json/brand1';

function App() {
  return (
    <div>
      {
        brand1.map((item, i) => 
        <div key={i}>
          <img src={require(`./assets/imgs/${item.path}`)} alt={item.title} />
        </div>
       )
      }
    </div>
  )
}

Vite项目适用

把require替换为Vite专属的资源引入写法即可：

<img src={new URL(`./assets/imgs/${item.path}`, import.meta.url).href} alt={item.title} />

方案2：public目录托管（适合大量静态图片场景） #

1. 将整个assets/imgs目录移动到项目根目录的public文件夹下
2. 修改brand1.js的路径为站点根目录绝对路径：

"path": '/assets/imgs/brand1/34-SAU028A.jpg'

3. 原有img标签写法无需修改，直接使用src={item.path}即可正常加载。

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