Vue-cli图片资源无法显示的原因及解决方案

由于Webpack在打包时，默认静态图片会被打包成base64编码格式，导致打包生成的路径与图片名（带hash值）和开发时放置的位置与名称并不一致。发生以下类似轮播图片无法显示的问题。比如：

开发时，如果静态配置页面图片位置，webpack在打包时会自动识别，并正确处理为以下网页实际路径：

但当我们使用v-if等指令，动态创建图片时，效果就不理想了


最终页面并不会显示图片内容，原因在于图片路径并没有取打包后的资源路径。
为了解决这个问题，我们可以用以下方式，指定data中资源的路径。

方法一：使用require导入图片资源

方法二：将图片资源文件放入static文件夹内