React项目本地图标/图片文件无法访问，页面仅显示问号求助

以下是针对问题的具体排查方向和解决方法：

• 构建工具版本/配置差异
  不同React项目的构建工具（如Create React App、Vite）对静态资源的处理逻辑不同。比如旧版CRA允许直接用相对路径访问src内的图片，但CRA v5+或Vite要求要么把图片放在public目录并用根路径（如/images/icon.png）访问，要么在组件顶部通过import Icon from './images/icon.png'导入后使用src={Icon}。如果新项目用了更新的构建工具，就会出现旧写法失效的情况。

• 路径与文件夹结构不匹配
  检查图片实际存放位置和代码中的路径是否完全一致，注意大小写敏感（部分构建工具或服务器环境区分大小写）。另外，组件所在层级会影响相对路径：比如组件在src/components/Header.jsx，图片在src/images/icon.png，正确的相对路径应为../images/icon.png，而非./images/icon.png。

• 资源未被正确打包
  查看项目的构建配置文件（如webpack.config.js、vite.config.js）或.gitignore规则，确认图片所在文件夹没有被排除在打包范围外，也没有配置只打包特定类型的资源。

• 浏览器缓存干扰
  浏览器可能缓存了旧的无效资源路径，尝试清除浏览器缓存，或在图片路径后添加版本参数（如/images/icon.png?v=2）强制加载新资源。

• 文件权限问题
  极少数情况下，图片文件的系统权限设置可能导致项目无法读取，检查文件权限是否允许当前用户访问。

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