动态拼接本地图片路径

vue图片路径动态拼接报错

失败加载的原因

然而这时候，会发现这个时候图片并没有被加载出来，图片没有显示出来，通过查看发现这张图片的地址显示 ../images/demo.png ，也就是说通过v-bind形式绑定的相对路径不会被webpack的file-loader处理，只会做简单的文本替换。

解决办法

1. 图片转位base64编码

   <img src="data:image/png;base64,iVBYKIGloxxxxxxxxxxxxxxxxxxx...">

   一般图片比较小的可以这么做，比如图标icon等，大小一般在10KB以内的。

2. 图片放置在 public 目录下或通过绝对路径被引用。推荐

   这类资源将会直接被拷贝，而不会经过 webpack 的处理。