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文件夹下。