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

司马艳清提问于 2026-03-02 15:52:18 阅读 35

前端

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

我的 HTML 是这样写的：

<img src="/images/logo.png" alt="Logo" />

我来解答赞 4 收藏

反馈

2 条解答

设计师怡涵 Lv1

遇到Vite里public目录图片404的问题挺常见的，我刚学Vite时也被坑过。这个问题其实和静态资源处理方式有关，我来详细说说。

原理是这样：Vite的public目录是特殊的静态资源目录，这里的文件会原封不动复制到最终构建的dist目录里。但关键点是public目录本身不会出现在最终路径中。

比如你的文件结构：

public/

  images/

    logo.png

构建后会变成：

dist/

  images/

    logo.png

  index.html

所以解决方案很简单，直接去掉public这层路径引用：

<!-- 错误写法 -->

<img src="/images/logo.png" />



<!-- 正确写法 -->

<img src="/logo.png" />

或者如果你想保持images目录结构，有两个选择：

1. 直接把图片放在public根目录下的images文件夹里：

public/

  logo.png

  images/

    logo.png

2. 改用assets目录方式（适合需要hash处理的图片），用import导入：

import logo from './images/logo.png'

// 然后在模板里

<img :src="logo" />

记住public目录适合放不需要处理的静态文件，比如favicon.ico、robots.txt这些。其他需要构建优化的资源最好放assets里。

另外提一嘴，Vite开发服务器会自动处理这些路径，所以开发环境和生产环境的行为是一致的，这点比webpack省心多了。

2026-03-06 16:05

Good“令敏 Lv1

检查一下你的 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，这时候你需要改成：

或者用 Vite 提供的 import.meta.env.BASE_URL 变量拼接路径，这样不管 base 怎么配都能自动适配。

2026-03-02 16:00