Vue img的src使用数据绑定不显示

不少人在vue的开发中遇到这样一个问题： img的src属性绑定url变量，然而图片加载失败。

 

<img src="{{ imgUrl }}"/>

原因：写法错误

解决：应该使用v-bind

<img :src="imgUrl"/>

 

但是有时这种写法图片也加载不出来

原因：因为你的imgUrl使用了本地图片的路径。

解决方案1：将图片放在src下的static文件夹内

原理：用build打包后的dist文件夹下，文件的位置发生了变动，但是static文件夹原封不动，即static文件夹为服务器暴露出的静态资源目录

解决方案2：直接传入图片编码

imgUrl = require('./assets/logo.png')

这样可以读到项目路径下的图片，但是要注意，因为CommonJS只允许使用字符串字面量，所以这种方法的灵活性依旧很差，所以还是推荐将静态文件放入static文件夹下。