vue动态绑定图片失效

vue中渲染图片的方式
(一)相对路径的导入，这两种方式都会被解析为一个模块依赖。vue-cli3静态资源引入
以下两种情况在小图片时会被转化成base64

<img src="@/assets/shop_2.png" alt="">

<img src="../assets/shop_2.png" alt="">

一般情况下都能够正常显示，但是有时候还会出现页面加载失败的问题；
如：(此时图片渲染不出来)

<img :src="imgUrl" alt="">

data () {
    return {
      isShowRed:true,
      imgUrl:"../assets/shop_2.png"
    };
  },

以上这种情况，在浏览器中查看源码时发现，该图片在浏览器中将网站的域名设为相对路径的根目录
（正常情况）

（异常情况）


解决方法
1、用import或者require的方式将图片作为模块加载
2、强所有图片放在static/img文件夹下面