问题描述
在vue项目中,给一个按钮加上背景图片,路径是正确的,但是编译后(npm run build)却不显示,但是如果给按钮加上图标,编译后就可以正常显示。
问题分析
经过排查发现,问题是因为编译前后,图片路径不一致导致的。
编译后会生成一个dist文件,图片在dist下的某个文件夹下。但是代码里写的图片路径还是原来的,所以页面上显示失败。
图标可以正常显示是因为图标经过了base64转换,正常的图片就不会这么转换。
如下图:图标的在img文件夹下,是svg格式(原png);背景图片在static下,是原来的png格式。
解决方案
网上找了很多办法,加什么require(‘imgUrl’),或者是改publicPath路径,但是都失败了。最后用了一个很low的办法,把图片路径改成编译后文件夹里的图片路径就可以正常显示了。
先记着,也需我可以找到更好的解决办法。