如何修复生产环境中图片导入的404错误

问题原因 #

本地开发时，Vite的开发服务器允许直接访问src目录下的资源，但生产构建后，src目录不会被打包到最终的部署文件中，所以直接写/src/assets/images/nicole_pic.jpeg这种路径，在Vercel上会找不到资源，返回404。

两种可行解决方案 #

方案1：通过ES模块导入图片（推荐） #

在组件中先导入图片资源，再将导入的变量作为src的值：

// 先导入图片
import nicolePic from '/src/assets/images/nicole_pic.jpeg';

// 在JSX中使用
<div className="ms-3 home-image-container">
    <img
       src={nicolePic}
       className="home-image"
     ></img>
</div>

Vite会自动处理这个导入，构建时将图片打包到dist/assets目录，并生成正确的资源路径，部署到Vercel后就能正常访问。

方案2：将图片放到public目录 #

1. 在项目根目录创建public/assets/images文件夹，把nicole_pic.jpeg放进去。
2. 修改图片路径：

<div className="ms-3 home-image-container">
    <img
       src="/assets/images/nicole_pic.jpeg"
       className="home-image"
     ></img>
</div>

public目录下的文件会被原封不动复制到生产构建的根目录，所以直接用根路径开头的地址即可访问。

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