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

发布时间 2023-09-19 17:19:29作者: ChoZ

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至此可以解决图片无法显示问题