React项目在CodeSandBox中无法显示图片问题排查请求

核心差异点分析 #

React项目在CodeSandBox中的资源加载逻辑和纯JS项目存在差异，主要排查方向集中在图片导入方式和路径解析规则上：

1. 图片导入方式不符合React打包规范 #

纯JS项目可直接用相对路径（比如./images/bg.jpg）引用图片，但React项目依赖打包器（Vite或webpack）处理资源，未通过ES模块导入的图片无法被正确解析：

• 错误写法：

  <img src="./images/bg.jpg" alt="background" />
  

• 正确写法：

  import bgImage from './images/bg.jpg';
  // 组件内使用
  <img src={bgImage} alt="background" />
  

2. 公共资源目录引用规则错误 #

若图片放在public目录下，React项目需用绝对路径引用（无需导入），但要确保路径以/开头：

• 正确写法（图片位于public/images/bg.jpg）：

  <img src="/images/bg.jpg" alt="background" />
  

  纯JS项目无此限制，但React打包器仅识别src内的导入资源或public内的绝对路径资源。

3. 文件名大小写不匹配 #

本地Windows系统不区分文件名大小写，但CodeSandBox基于Linux环境，严格区分大小写。检查代码中引用的文件名（如Bg.jpg）和实际文件（如bg.jpg）是否完全一致。

4. CodeSandBox打包缓存问题 #

打包器缓存可能导致资源未被重新编译，可尝试：

• 点击CodeSandBox右上角「Refresh」按钮重启项目
• 清空浏览器缓存后重新加载页面

验证步骤 #

1. 确认图片文件已正确上传至CodeSandBox项目的对应目录
2. 将React组件中的图片引用改为ES模块导入或public目录绝对路径格式
3. 核对文件名大小写是否完全匹配
4. 重启项目测试图片加载状态

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