Vite-React项目Retina屏适配图404无法显示问题排查求助

• 检查imagex2变量的路径值

  • 在组件中添加console.log(imagex2)，确认输出路径是否为/img/person1@x2.png，排查拼写错误（比如路径少了开头的/，或文件名后缀错误）
  • 确保路径是绝对路径（以/开头），避免相对路径导致的资源定位错误

• 核实项目类型与配置匹配

  • 你提到是Vite-React项目，但package.json中使用的是react-scripts start（Create React App的启动脚本），这可能是核心矛盾点：
    • 若为Create React App项目，需确认文件名大小写是否与代码完全匹配（Linux/macOS系统大小写敏感）
    • 若为Vite项目，检查vite.config.js中的publicDir配置或静态资源处理规则，确认是否过滤了含@x2的文件名

• 清理开发环境缓存

  • 强制刷新浏览器（Ctrl+Shift+R）或清空浏览器缓存，避免旧资源映射缓存导致404
  • 重启开发服务器，确保服务器加载了最新的文件列表

• 验证文件实际存在性

  • 用终端命令（如ls public/img/）列出目录内容，确认person1@x2.png确实存在，排查隐藏后缀（如person1@x2.png.txt）或不可见字符问题
  • 检查文件系统是否对@字符有特殊处理，导致服务器无法识别文件名

• 测试srcSet的静态写法

  • 暂时将srcSet写死为srcSet="/img/person1@x2.png 2x"，排除变量赋值错误的可能
  • 排查是否有构建插件（如webpack/Vite插件）自动修改图片文件名，将@x2替换为其他格式（如_2x）

• 检查路由拦截问题

  • 若使用react-router-dom的BrowserRouter，确认路由规则中没有匹配/img/*的路由，避免静态资源请求被路由拦截
  • 将放大图移至public根目录，访问http://localhost/person1@x2.png，排查img目录的权限或配置问题

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