在Vite构建的JS网站中如何正确引用图片？

核心问题定位 #

1. 文件夹名称不匹配：你的public目录下是image_files文件夹，但你引用时用的是/images/路径，这是图片找不到的直接原因。
2. 相对路径适配：由于你在vite.config.js中设置了base: "./"（相对路径基准）和root: "./src"，需调整引用路径以适配相对部署场景。

正确引用代码 #

将图片引用改为以下两种形式之一（均支持开发和生产环境）：

<!-- 方式1：明确相对路径 -->
<img src="./image_files/image01.jpg" loading="lazy" alt=""/>

<!-- 方式2：省略开头的./（效果相同） -->
<img src="image_files/image01.jpg" loading="lazy" alt=""/>

原因说明 #

• Vite会将public目录下的文件直接复制到构建产物（dist）的根目录，开发时则映射到服务器根路径。因此public/image_files/image01.jpg最终会被放在dist/image_files/image01.jpg，与a.html同级。
• 你设置了base: "./"，使用相对路径能避免在子目录部署时出现路径错误，比绝对路径/image_files/image01.jpg更适配你的配置。

额外注意 #

若后续需要改用绝对路径，可将vite.config.js中的base改为"/"，此时引用路径可写为/image_files/image01.jpg，但仅适用于部署在域名根目录的场景。

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