Vite 中引用 public 目录下的图片为什么 404 了?

司马艳清 阅读 7

我刚接触 Vite,把一张 logo.png 放在了 public/images/ 目录下,然后在 HTML 里直接用相对路径引用,结果页面加载时图片显示 404。我试过用 /images/logo.png 和 ./images/logo.png 都不行,是不是 public 目录的用法不对?

我的 HTML 是这样写的:

<img src="/images/logo.png" alt="Logo" />
我来解答 赞 2 收藏
二维码
手机扫码查看
1 条解答
Good“令敏
检查一下你的 public 目录是不是放在项目根目录,跟 package.json 同级。Vite 规定 public 必须在根目录下,里面的文件会直接映射到根路径。如果你的目录结构是 src/public/images/logo.png 那就错了,应该是 public/images/logo.png。

引用方式 /images/logo.png 是对的,不需要改。另外检查一下 vite.config.js 里有没有配置 base 选项,如果设置了比如 base: '/app/',那访问路径就变成了 /app/images/logo.png,这时候你需要改成:

Logo


或者用 Vite 提供的 import.meta.env.BASE_URL 变量拼接路径,这样不管 base 怎么配都能自动适配。
点赞
2026-03-02 16:00