React项目中从data.js文件导入图片无法正常渲染的问题排查

导致问题的核心原因 #

• 渲染逻辑缺失：当前组件代码仅将图片路径字符串作为纯文本输出，没有添加<img>标签触发图片资源加载，即便路径完全正确，页面也只会显示一串路径文本，无法正常展示图片。
• 静态资源路径未被构建工具识别：
  • 如果图片存放在src目录范围内，在data.js中直接写裸相对路径字符串（比如../assets/xxx.png）是无效的。Webpack、Vite这类构建工具仅会扫描通过import语法主动引入的资源，不会自动识别普通JS对象里的路径字符串，这类路径在生产构建后会直接返回404。
  • 如果图片存放在public目录下，路径必须以/开头写绝对路径（比如/images/xxx.png），如果按相对路径书写，会在路由跳转时出现路径匹配错误。
• 空值访问触发渲染中断：代码中硬编码读取data.cities['id-1']的属性，如果遍历到的某条数据的cities对象中不存在id-1这个key，就会直接抛出Cannot read properties of undefined的控制台报错，中断整个页面的渲染流程。

可落地的修改方案 #

方案1：图片存放在public目录（适合静态资源较多的场景） #

1. 将所有业务用到的图片移动到public/images/文件夹下
2. 修改data.js中每条数据的src字段，统一写为/images/对应图片文件名.png
3. 补全组件中的渲染逻辑，增加空值判断避免报错：

   {countries.map((data, key) => {
     const targetCity = data.cities?.['id-1']
     if (!targetCity) return null
     return (
       <div key={key}>
         <div>{data.countryCapital}</div>
         <div>{targetCity.name}</div>
         <div>
           <img src={targetCity.src} alt={targetCity.name} />
         </div>
       </div>
     )
   })}
   

方案2：图片存放在src/assets目录（适合需要做资源优化打包的场景） #

1. 在data.js文件顶部，通过import语法主动引入所有需要用到的图片资源，构建工具会自动处理资源路径、生成带hash的可访问地址

   // database/data.js 顶部导入
   import parisImg from '../assets/paris.jpg'
   import tokyoImg from '../assets/tokyo.jpg'
   // 其他用到的图片依次导入
   // 在导出的countries数组中，将对应src字段的值替换为导入的图片变量
   export const countries = [
     {
       countryCapital: '巴黎',
       cities: {
         'id-1': {
           name: '巴黎',
           src: parisImg
         }
       }
     }
   ]
   

2. 组件部分的渲染逻辑和上述方案保持一致，补全<img>标签和空值判断即可。

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