vue-img路径不能在js中使用变量给src动态绑定的问题

1 原因:

1. webpack分析标签的时候，如果src的值是一个相对路径，它会去帮我们找到那个路径的文件并一起打包// 打包时候，会分析文件的大小，小图转成base64字符串再赋予给src，如果是大图拷贝图片换个路径给img的src显示(运行时)
2. Vue变量中路径，赋予给标签，都会当做普通的字符串使用]以前:我们写的路径是在vscode看着文件夹写的(以前好使的原因:你用Live Server/磁盘双击打开，它都能通过你的相对路径，在指定路径文件夹下，找到图片文件真身)
3. 现在:写的模板代码，是要被webpack翻译处理转换的，你scode里的代码，转换后打包到内存中/dist下，相对路径就会变化，运行时，你写的固定路径字符串就找不到那个文件真身

2 解决

1. “JS里引入图片，就用import引入"，让webpack把它当做模块数据，是转换成打包后的图片路径还是base64字符串

2. 给img标签绑定ref属性

<img src="@/assets/image/cuowu1.jpg" style="width:300px;height:300px" ref="imgPath" alt="" />

3. 定义方法，通过this.$refs获取绑定的属性，通过setAttribute方法，给img添加一个src属性，值是 url

    coverUrl() {
        this.$refs.imgPath.setAttribute('src', imgObj)
      }

4. 别忘了在mounted调用这个方法，