在用Vite开发时静态图片放哪里,才能保证显示，不出现找不到资源

已于 2023-12-28 22:43:43 修改
阅读量902 收藏 8
点赞数 17
CC 4.0 BY-SA版权
文章标签： 前端 vite
于 2023-12-28 22:01:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Go_ahead_forever/article/details/135279374
本文介绍了在使用Vite开发时，如何将静态图片放置在public目录下以实现直接打包并正确引用，强调了项目中路径设置的重要性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在用Vite开发时静态图片放哪里

在用Vite开发时静态图片（资源）放哪里呢 ？

如果你想直接全部显示的那么请你把静态资源放到public目录下面，这样你一打包所有的静态资源都会放到打包根目录下。但是此时你在项目中引用的地址一定要是直接 /根目录开始，这样就能识别了，不用从public目录开始，不然会识别不了

在这里插入图片描述

在这里插入图片描述

vue3+vite - 打包编译后页面白屏、CORS跨域、加载js/html文件失败、图片不显示、音视频不显示问题，解决打包生成index.html页面显示空白、找不到资源、报资源跨域打不开报错问题！
高级前端工程师
05-30 1万+
vue3，vite，build，打包编译，vite打包后页面白屏，index.html，dist，跨域，CORS报错，图片不显示，资源js加载出错，部署服务器后打开，页面空白，网页不显示，浏览器控制台，全是报错，vite+vue3执行build打包后index.html无法打开怎么办，打不开咋办，啥也不显示，index.html打开空白，打开cors跨域怎么解决，网页上线后一刷新就报错，上线后，typescript，ts，404-Page Not Found，vite build后访问报错，Vite+Vue
vue3 - vite项目打包部署服务器上线后图片不显示并且路径中存在undefined字眼，本地开发环境下正常显示图像没任何问题，但build编译打包后上传到线上服务器后再打开就不显示了，路径有问题
高级前端工程师
08-18 4475
vue3，vite，图片不显示，图像加载失败，打包后图片路径不对，前面多了一个undefined，本地没问题只要打包上线就报错，vue3 vite项目解决部署线上图片URL失效问题，使用本地图片打包后不显示，本地资源路径，本地图片图标，图标不显示，打包后图片失效的问题，访问图片/图标不显示的问题，vue3+vite打包后图片路径错误不显示，背景图打包之后访问路径错误问题的解决，打包部署到服务器上却显示路径undefined问题，图片url域名错误，导致无法显示，还是报错显示不了，如何解决，无效，还是不行，r
一文搞懂在 Vue + Vite 项目中，应该将图片放在 ‘public’ 文件夹还是 ‘src/assets’文件夹
surfirst的博客
10-08 967
在 Vue + Vite 项目中，选择将图片放在 `public` 文件夹还是 `src/assets` 文件夹取决于你打算如何使用这些图片。
关于vite的静态资源放置路径与打包问题：到底是放public下还是放assets下
商务合作 / 项目定制开发 / 前端一对一培训、答疑
09-28 1万+
如果图片不需要被处理，比如网站的结构用图，如logo图片，则放`public`中，否则如内容图片或者需要被构建为`base64`的小图标可以放放`assets`中
在 Vite 中如何处理静态资源
最新发布
念旧的博客
06-03 1182
在 Vite 中处理静态资源（如图片、字体、CSS/JS 文件等）主要通过自动路径解析、内联优化、显式后缀控制等机制实现，同时支持生产环境下的哈希命名和压缩优化。本文将详细介绍在 Vite 中如何处理静态资源。
Vite -静态资源处理 - 普通的图片
northcastle的博客
11-17 533
vite 对 静态图片的使用案例
【傻瓜式教学】Vite项目中静态资源路径处理（打包后线上环境无法显示静态资源）
小安驾到的博客
11-09 6875
适用场景： img标签是通过v-for动态指定src路径的，本地可以正常显示，一旦打包之后就无法在线上显示了。 Bug原因： Vite打包只会处理静态src路径，动态src路径只会原样保留。
vite静态图片加载
weixin_42447143的博客
09-09 501
三种方式（应该不止这三种）
vue cli3.0打包上线静态资源找不到路径的解决操作
10-15
在使用 Vue CLI 3.0 进行项目打包时，可能会遇到静态资源（如图片、CSS、JavaScript 文件等）找不到路径的问题。这个问题通常出现在部署到服务器后，因为本地开发环境与线上环境的资源路径不同。以下是如何解决这个...
Vite: 静态资源在生产环境部署
Wang的专栏
06-24 2081
3 ) 打包成单文件或作为base64文件内联。5 ）雪碧图减少图片的HTTP的请求。1 ）通用的 cdn 前缀。2 ) 图片托管到其他地址。5.2 使用雪碧图优化。
vite 打包之后静态图片找不到
04-03
同时，引用3中的别名配置示例显示，可以通过vite.config.ts中的resolve.alias来设置路径别名，比如将@assets指向src/assets，这样在代码中引用图片时可以使用别名，避免相对路径的混乱。 然后，用户可能在代码中...
解决Vite动态使用本地图片不显示问题
qq_46343149的博客
02-10 2118
封装函数解决图片不显示问题
vue3+vite：动态引入静态图片资源
qq_45796592的博客
06-13 8593
vite不支持require方法；vue3+vite如何动态引入静态图片资源
Vue3 - vite 引入本地图片方法，页面引入本地静态资源图像详细教程，解决 UI 前端组件库的图片属性无法使用本地图像问题（无论是本地开发还是打包部署，本地图片的路径正常可用）
前端开发大师鸭
09-08 1万+
vue3vite引入使用本地图片，vue3vite如何引入本地资源的图片图像，vite怎么把本地的图片赋值给src图片标签属性，vue3vite使用require引入本地图像报错，vue3vite组件库的组件怎么引入本地图片，vue3vite如何给组件库的图片属性链接本地资源的图像，elementplusantdesignvue组件怎么使用本地资源的静态图片，vue3vite版本引入本地静态图片的方式，vue3+vite引入本地图片，vue3如何加载本地图片等静态资源，引入
VitePress-09-文档中引入静态资源-图片-相对路径的方式
northcastle的博客
02-05 2001
VitePress 中通过项目路径的方式引入静态资源的操作
vue3+vite项目，打包后，图片失效的问题
insist_life的博客
08-02 1万+
第一次使用vue3+vite写一个项目，不太清楚这里的配置和vite构建工具的特性，所以在开发的时候，图片的路径都是用的相对路径；这样的静态路径引入，在开发和打包上测试环境都没有问题，都能正常显示！可以发现，在域名下直接接了src文件，但是这个域名下面是没有src文件夹的。所以浏览器报错了，同时页面没有图片显示，所以打包的时候，图片的路径出问题了！结尾：此文章仅为了下一次有相同的问题能够快速的解决，具体造成这种错误的原因需要去了解vite，有时间再说吧！这样的话，开发和上测试的时候，图片都能够正常显示了！
vue3 vite版本 引入本地静态图片的方式
热门推荐
阿里巴啦的博客
01-28 2万+
vue3引入本地静态图片
vue3+vite5中require引入图片失效，解决方法new URL
yavlgloss的博客
07-30 372
vue3+vite5中require引入图片失效，解决方法new URL
vue3+ts+vite打包后静态资源404无法加载js和css
weixin_59855825的博客
02-20 6561
vite 打包生成的文件如果直接放在服务器中是可以正常访问的，但是本地直接访问打包生成index.html文件就会提示以下问题。主要：打包静态文件必须是根路径，否则放到服务器找不到静态资源（同理于webpack中的publicPath 的配置）在vite.config.ts中设置：base: "./"具体代码如下。问题1：访问的文件不存在，主要是因为路径配置问题。解决：在 vite.config.js文件中配置。访问的文件不存在，主要是因为路径配置问题。再次打包问题解决——
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xwhking

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值