vue+webpack 模块编译后背景图片不显示

问题描述

在vue项目中，给一个按钮加上背景图片，路径是正确的，但是编译后（npm run build）却不显示，但是如果给按钮加上图标，编译后就可以正常显示。

问题分析

经过排查发现，问题是因为编译前后，图片路径不一致导致的。
编译后会生成一个dist文件，图片在dist下的某个文件夹下。但是代码里写的图片路径还是原来的，所以页面上显示失败。
图标可以正常显示是因为图标经过了base64转换，正常的图片就不会这么转换。
如下图：图标的在img文件夹下，是svg格式（原png）；背景图片在static下，是原来的png格式。

解决方案

网上找了很多办法，加什么require(‘imgUrl’),或者是改publicPath路径，但是都失败了。最后用了一个很low的办法，把图片路径改成编译后文件夹里的图片路径就可以正常显示了。
先记着，也需我可以找到更好的解决办法。