React项目图片仅显示破损图标与alt文本的问题排查

你的图片存放在src/images/目录下完全符合create-react-app的规范，存放位置没有问题；问题出在图片引用的相对路径计算错误，导致webpack没有正确识别、打包对应的图片资源，最终生成的img标签src为无效路径，才会出现带alt文本的破损图标。

你写代码的App.js默认存放在src目录下，引用图片时写的require('../src/images/image.jpg')存在逻辑偏差：
相对路径计算上，../ 会从当前App.js所在的src目录往上跳转一层到项目根目录，再拼接src/images/image.jpg，虽然物理上指向的是同一个文件，但因为路径带着跳出src范围的跳转符../，会被CRA内置的webpack判定为非源码范围内的资源，不会对这个图片做打包处理，最终require返回的是无效资源地址，自然加载失败。

可直接落地的修正方案 #

方案1：直接修正require的相对路径 #

把原代码里的img标签引用：

<div><img src={require('../src/images/image.jpg')} alt="profile_picture" /></div>

改成基于当前文件目录的正确相对路径：

<div><img src={require('./images/image.jpg')} alt="profile_picture" /></div>

这个路径直接指向src目录下同级的images子文件夹，完全在webpack的编译处理范围内，会自动生成有效的带缓存哈希的资源URL，不会出现破图。

方案2：顶部导入图片资源（更推荐的写法） #

不要在JSX逻辑里写require语句，直接在组件文件的顶部，和其他依赖一起把图片作为模块导入：

import React from "react";
// 在顶部导入目标图片，后续直接用变量当src
import defaultProfile from './images/image.jpg';

在img标签中直接使用导入的变量：

<div><img src={defaultProfile} alt="profile_picture" /></div>

这种写法能减少手写路径的出错概率，也是CRA官方推荐的静态资源引用方式。

后续适配多员工头像的调整建议 #

现在所有员工都共用同一张图片的话，你可以把每个员工对应的头像资源作为属性，存到state的员工数据数组里，不用在渲染逻辑里重复写图片引用：

this.state = {
  term: "",
  names: [
    { 
      name: "Deepak", 
      job_profile: "Quality Analyst", 
      description: "He is Passionate in Tester",
      avatar: require('./images/deepak.jpg')
    },
    { 
      name: "Deepinder", 
      job_profile: "iOS Developer", 
      description: "He is a Dedicated iOS Developer",
      avatar: require('./images/deepinder.jpg')
    }
  ],
  filteredData: [{}]
};

渲染时直接读取每个员工对象的avatar属性就行：

<div><img src={item.avatar} alt="profile_picture" /></div>

容易踩的同类坑提醒 #

• 不要随意在静态资源引用路径里加跳出src目录的../跳转，一旦路径超出src的编译范围，webpack就不会处理对应资源，必然破图
• 要核对实际图片文件名、后缀名的大小写，比如实际文件是Image.jpg，代码里写image.jpg，在Linux环境部署时就会因为路径大小写不匹配加载失败
• 尽量不要把图片放到public目录下用绝对路径引用，这种方式虽然能显示图片，但会缺失webpack的资源压缩、缓存哈希优化，长期维护成本更高

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