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至此可以解决图片无法显示问题
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!