React项目图片加载失败仅显示alt标签问题求助

问题表现 #

• 代码编译阶段无报错，浏览器开发者工具控制台无异常输出
• 页面中图片alt属性值可正常渲染，图片资源本身加载失败
• 已尝试配置webpack、静态资源路径直接导入等方案均未解决问题
• 相关业务代码统一存放在component/InfoSection目录下，涉及3个文件：
  • Data.js：存储页面配置对象homeObjOne，通过require('../../images/hacker.svg')引入SVG资源，配置alt值为hacker，其余为样式、文案配置
  • index.js：InfoSection函数组件，解构接收传入的props，最终将img、alt值传递给封装的Img组件作为src、alt属性
  • InfoElements.js：基于styled-components封装的各区块样式组件，包含InfoContainer、Img等样式规则

高频根因与对应修复 #

1. require引入静态资源返回值错误（占这类问题90%以上） #

webpack 5及以上版本、CRA4及以上脚手架默认对静态资源采用ES模块规范处理，require()引入资源时返回的是模块对象，不是直接的资源路径字符串，直接赋值给img字段传给src会导致资源加载失败，且编译阶段不会抛出任何错误。
修复方式二选一即可：

• 给require补充.default取值，拿到实际资源路径：

// Data.js 对应配置修正
export const homeObjOne = {
  // 其余样式、文案配置保持不变
  img: require('../../images/hacker.svg').default,
  alt: 'hacker'
}

• 改用ES模块import语法引入，规避require的模块对象问题：

// Data.js 文件顶部先引入资源
import hackerImg from '../../images/hacker.svg'

export const homeObjOne = {
  // 其余样式、文案配置保持不变
  img: hackerImg,
  alt: 'hacker'
}

2. styled-components封装的Img组件不符合规范 #

styled-components默认会自动透传合法DOM属性到原生标签，如果组件定义出错会导致src属性没有正确挂载到原生img元素上：

• 确保Img是基于img原生标签封装，不要写成div等其他标签再试图传src加载图片
• 正确写法参考：

// InfoElements.js 中Img组件正确定义
export const Img = styled.img`
  max-width: 100%;
  height: auto;
  /* 其余自定义样式按需配置即可 */
`

3. 路径或文件名不匹配 #

• 核对相对路径层级：从component/InfoSection/Data.js出发，../../images/hacker.svg对应的实际路径应为src/images/hacker.svg，如果目录层级不对要按实际存储位置调整
• 核对文件名大小写：本地Windows开发环境不校验路径大小写，一旦文件名有大小写偏差（比如实际文件是Hacker.svg，引入时写hacker.svg），部署到Linux服务器时就会出现资源404，要保证引入路径和实际文件名大小写完全一致

修复校验方法 #

改完后打开浏览器开发者工具的Elements面板，定位到渲染出的img标签：

• 如果src属性值显示为[object Module]或[object Object]，说明资源引入写法还是错的，回到第一步检查require/import的取值
• 如果src属性值为类似/static/media/hacker.3f41a2d.svg的打包路径，点击该路径能直接打开图片，说明资源加载链路正常，清浏览器缓存强制刷新页面即可
• 如果点击src路径跳转到404页面，说明文件路径配置错误，重新核对相对路径层级

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