React遍历本地JSON数据渲染时无法读取图片URL

存储在本地的JSON数据通过map方法遍历渲染React页面时，JSON内配置的本地图片URL无法被识别，对应图片加载失败；通过import方式提前引入图片为变量后再使用，图片可正常展示。

React项目基于webpack/Vite等模块化构建工具运行，直接写在JSON中的本地相对图片路径，不会被构建工具的静态资源解析逻辑识别：构建阶段不会将对应图片加入打包资源列表，也不会把原始路径替换为打包后可访问的最终资源地址，浏览器拿到的是无效的相对路径，自然无法加载图片。
而import引入图片的写法，属于构建阶段明确标记的静态资源依赖，会被构建工具正确处理，返回打包后的合法资源地址，因此可以正常展示。

• 方案1：将图片放入public静态目录
  把所有需要动态引用的本地图片存入项目的public目录，JSON中配置的图片路径写为从public根目录出发的绝对路径（例如图片存放路径为public/assets/logo.png，JSON中对应路径写为/assets/logo.png）。这类路径不会被构建工具做模块解析，会直接作为站点根路径下的静态资源被浏览器访问，无需提前import。
• 方案2：渲染时动态声明静态资源依赖
  若使用webpack构建的项目，渲染时给JSON中的图片路径套上require()语法，标记为需要解析的静态资源：

  {dataList.map(item => (
    <img src={require(item.imgPath)} alt={item.title} />
  ))}
  

  若使用Vite构建的项目，使用Vite原生支持的动态资源写法：

  {dataList.map(item => {
    const imgSrc = new URL(item.imgPath, import.meta.url).href
    return <img src={imgSrc} alt={item.title} />
  })}
  

  注意：该方案要求JSON中存储的图片路径为相对当前组件文件的、可被静态分析的固定路径，不要使用完全动态拼接的随机路径，否则构建工具无法定位对应资源。
• 方案3：提前生成图片资源映射表
  图片量不大的场景下，可以单独维护一个资源映射文件，提前引入所有需要用到的图片，以键值对形式存储图片标识和实际打包后地址的对应关系。JSON中仅存储图片的标识字段，渲染时从映射表取真实地址即可：

  // src/assets/imgMap.js
  import logo from './images/logo.png'
  import productCover from './images/product.png'
  export default {
    logo,
    productCover
  }
  

  渲染逻辑：

  import imgMap from './assets/imgMap'
  {dataList.map(item => (
    <img src={imgMap[item.imgKey]} alt={item.title} />
  ))}
  

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