vite打包上线后,部分图片无法显示

1.情况:使用vite打包后,上线时部分图片展示不了。

 1.1使用css引用的图片能够正常展示,能够打包进dist文件中assets中,查看浏览器中引用路径为assets中的图片,如此引用的图片不需经过特别处理,不管是放在static或者public的文件夹中都可以,都能够自动打包进dist中的assets文件夹中,并且浏览器中能够自动编译为获取dist中的assets文件的图片,不需特地修改代码中图片的路径(因为编译到assets文件的图片命名会带hash值,因此需要vite特地取编译才能正确获取到图片)

 

 1.2写在vue文件的图片,使用行内样式的无法显示,查看dist文件,发现行内样式图片没有打包进assets文件中,浏览器中的图片引用路径没被编译,图片无法展示。此处的行内样式图片vite不会进行打包,更不会帮助路径编译,因此图片是无法展示的。

 

 2.解决行内样式图片无法显示图片:

 2.1将所有图片文件放进public文件夹中,因为vite不会打包public的文件,并且不会给图片加上hash值

 

 2.2在代码层面修改图片引用路径,由/public/img/xxx.png修改为/img/xxx.png,路径计算公式为通过dist文件夹中获取该图片的路径计算,因为public文件夹打包至dist中时文件结构发生改变(这样并不会导致本地环境无法引用到该图片,去除/public依然可以获取到图片,虽然vscode插件显示获取不到该图片)

  2.3至此可以解决图片无法显示问题

 

posted on   ChoZ  阅读(2902)  评论(1编辑  收藏  举报

相关博文:
阅读排行:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!
· 用 C# 插值字符串处理器写一个 sscanf

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示