React项目部署至Netlify后图片无法渲染的问题求助

• 检查图片引用路径
  确保public文件夹内的图片使用绝对路径引用（以/开头），例如：

  <img src="/avatar-juliusomo.png" alt="User avatar" />
  

  避免使用相对路径（如./avatar.png），因为Vite构建后public资源会直接输出到dist根目录，相对路径会导致线上请求路径错误。同时排查代码中是否存在硬编码的本地文件路径（如C:/xxx/xxx.png）。

• 验证Vite配置的base参数
  打开项目根目录的vite.config.js，确认base配置与Netlify站点的部署路径匹配：

  export default defineConfig({
    base: '/', // 若站点部署在根域名下，保持默认即可；若部署在子路径，需改为对应路径如'/interactive-comments-section/'
    // 其他配置...
  })
  

  你的Netlify站点使用根域名，因此base设为'/'是正确的，若配置有误会导致资源路径前缀错误。

• 确认Netlify构建配置
  登录Netlify后台，进入站点的「构建和部署」设置：

  • 构建命令需设为npm run build
  • 发布目录需设为dist
    若这两项配置错误，会导致Netlify无法正确识别构建产物的结构。

• 排查浏览器网络请求
  打开线上站点的浏览器开发者工具（F12），切换到「网络」标签，刷新页面查看图片的请求状态：

  • 若返回404，对比请求路径与dist文件夹内图片的实际路径是否一致
  • 检查请求路径是否存在多余的前缀（如/assets/），这通常是引用路径或Vite配置错误导致的

• 清理缓存重新部署

  • 手动部署：先删除本地dist文件夹，重新执行npm run build后再上传至Netlify
  • GitHub自动部署：在Netlify的「部署记录」中选择「Clear cache and deploy site」，强制触发全新构建，避免缓存导致的旧路径问题

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