React+Vite部署Netlify后图片不显示（404错误）求助

问题根源 #

Vite打包生产环境时，会把src目录里的资源编译后转存到dist目录，不会保留原有的src文件夹，所以你写的/src/assets/profilephoto.jpg这种路径，部署后根本找不到对应文件，自然返回404。

具体修复步骤 #

方法1：用ES模块导入图片（最稳妥） #

别直接写静态路径，改成在组件里导入图片：

// 假设组件在src目录下，和assets同级
import profilePhoto from './assets/profilephoto.jpg';

// 然后在img标签里用导入的变量
<img src={profilePhoto} alt="Olivia Gowan Photo" />

Vite会自动帮你处理打包后的路径，不用担心部署后找不到。

方法2：用public目录的话，修正路径 #

你已经试过把图片移到public文件夹，那引用的时候要删掉路径里的src，直接写：

<img src="/assets/profilephoto.jpg" alt="Olivia Gowan Photo" />

因为public里的文件会原封不动放到打包后的根目录，直接从根目录开始访问就行。

方法3：检查Netlify的构建配置 #

• 确认Netlify的构建命令是npm run build，输出目录填dist（Vite默认的打包输出文件夹）
• 之前加的_redirect文件如果不是用来处理路由的，暂时可以删掉，避免干扰

验证小技巧 #

本地先跑一遍npm run build，打开dist文件夹看看图片在哪，再对比你写的引用路径，就能快速发现问题。

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