如何在React项目中通过JSON文件引入public文件夹内的图片资源

核心问题原因 #

导致这类问题的常见原因如下：

• JSON文件导入路径错误，运行时无法正常读取图片配置
• JSON中存储的是静态资源相对路径，直接赋值给img的src属性时，没有经过打包工具的资源解析，打包后路径失效
• JSON中存储的图片路径拼写错误，和实际文件存放路径不匹配

分步修复方案 #

1. 修正JSON文件导入路径
   确认JSON文件的存放位置，使用正确的相对路径导入，示例：

   // 假设JSON存放在src/assets目录下，当前代码文件在src目录下
   import imageConfig from './assets/image-config.json'
   

2. 处理静态资源相对路径
   不要直接使用JSON中存储的相对路径，根据你使用的打包工具做对应处理：
   • Webpack生态项目（Vue CLI、Create React App等），读取路径时用require包裹：

   const bannerImgUrl = require(`./assets/${imageConfig.bannerImg}`)
   

   • Vite生态项目，用new URL处理路径：

   const bannerImgUrl = new URL(`./assets/${imageConfig.bannerImg}`, import.meta.url).href
   

3. 核对路径拼写
   检查JSON中存储的路径和你本地图片的实际存放路径完全一致，不要多写/漏写目录层级，注意大小写敏感问题。

验证方式 #

修复后可以在控制台打印最终的图片路径，直接访问该路径确认是否可以正常加载图片，能正常访问即配置正确。

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