Vite 中引用 public 目录下的图片为什么 404 了? 司马艳清 提问于 2026-03-02 15:52:18 阅读 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“令敏 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 加载更多 相关推荐 2 回答 47 浏览 Vite打包后为什么静态资源路径404? 用Vite开发的项目部署到服务器后,图片和字体文件都报404错误,明明在public目录里放了资源,也配置了publicDir: 'public',生产构建后的dist里确实有这些文件,但页面访问时路... 皇甫桂香 优化 2026-02-08 23:20:28 2 回答 77 浏览 Vite项目中图片路径在打包后显示404怎么办? 我在开发环境用能正常显示图片,但打包后访问根路径时图片404了。试过改成还是不行,public目录配置也没问题,这是哪里出错了? 项目结构是这样的:src/里放代码,public/放静态资源。打包生成... UI志敏 工具 2026-01-28 12:07:30 2 回答 36 浏览 Nitro dev模式下静态图片路径404,怎么配置才能正确访问? 在Nuxt3项目里用Nitro开发服务器运行时,引用public/image目录下的logo.png一直报404。我直接写和都试过了, 控制台报错显示:GET http://localhost:300... UE丶尚文 框架 2026-02-17 19:40:25 2 回答 26 浏览 Vite+React项目中配置别名后无法导入组件,路径报错怎么办? 在用Vite搭建React项目时,我按文档配置了@别名指向src目录,但导入组件时总提示404错误。比如这样写: // vite.config.js import { defineConfig } f... 迷人的晟华 框架 2026-02-14 19:05:26 2 回答 59 浏览 Vite配置base选项后静态资源404怎么办? 在用Vite打包生产环境时,我设置了base: '/dist/',但访问页面时图片和CSS都404了。调整过publicDir也没用,控制台报错说资源路径变成了/dist/dist/images/lo... 小敏 工具 2026-02-04 21:09:30 2 回答 67 浏览 Vite Library模式打包后为什么多出.eslintrc.js文件? 在用Vite的Library模式打包组件库时,发现生成的dist目录里多了一个.eslintrc.js文件,但配置里没配置要包含它。尝试过设置assetsInclude排除,但还是会出现,这是什么情况... 夏侯瑞娜 前端 2026-01-30 22:07:24 1 回答 12 浏览 Vite中用Glob导入Vue组件为啥不生效? 我在用Vite的Glob导入动态加载views目录下的页面组件,但页面一片空白,控制台也没报错,是写法有问题吗? 我试过直接import单个组件是能显示的,换成Glob就不行了,是不是解构方式不对? ... 子聪 Dev 工具 2026-02-24 15:44:21 1 回答 66 浏览 为什么切换到Vite后Sass配置不生效?Webpack和Vite的CSS处理配置有何不同? 我之前用Webpack配置了Sass,现在迁移到Vite后样式文件报错说找不到变量,但代码明明没改啊。之前在vue.config.js里通过chainWebpack添加了sass-loader,现在换... ❤丽丽 前端 2026-02-18 21:47:33 2 回答 16 浏览 Vite打包库时为什么第三方依赖会被包含进输出文件? 我用Vite的Library模式打包一个React组件库,但发现打包后的文件包含了react-i18next的代码,明明在vite.config里设置了external排除。试过调整optimizeD... 萌新.一鸣 工具 2026-02-18 16:19:26 1 回答 37 浏览 Vite中使用glob导入组件后为什么路径报错? 大家好,我在用Vite+React项目里用glob导入组件时遇到了问题。按照网上的方法写了这样的代码: import { glob } from 'glob'; const com... 诸葛英洁 工具 2026-02-13 12:23:27
引用方式
/images/logo.png是对的,不需要改。另外检查一下 vite.config.js 里有没有配置base选项,如果设置了比如base: '/app/',那访问路径就变成了/app/images/logo.png,这时候你需要改成:或者用 Vite 提供的
import.meta.env.BASE_URL变量拼接路径,这样不管 base 怎么配都能自动适配。