https://blog.csdn.net/qq_32786873/article/details/70161342
https://blog.csdn.net/xb12369/article/details/49759213
解决的方法也很简单，在重新给img的src属性赋值时，先将onerror事件清除掉，再赋值，这样就不存在循环调用的问题了，代码段如下：
<img src="http://img1.soufunimg.com/agents/2011_01/08/62/78/sh/houseinfo/408971808300_s22.jpg"
onerror="this.onerror='';this.src='http://img1.soufunimg.com/agents/2011_01/08/62/78/sh/houseinfo/4089718083001_s.jpg'" />
Vue.js项目中,当图片无法显示时则显示默认图片
最近在学习Vue时，遇到了一个问题，就是从后台传过来的图片路径无效时，需要在页面显示默认图片
本人试了3种方法，2种方法失败了
失败方法一：
见http://blog.csdn.net/qq_32786873/article/details/53483951
失败方法二：直接把图片路径直接写在data里面作为变量传到模板中，但是却发现图片还是出不了，以为是图片路径的问题，查了半天才发现项目启动后图片的路径并不是我们写的路径了。比如我们写的图片路径是：../assets/img.png，但是在网页开发者工具查看时路径却是：/static/img/img.4aa0af1.png，也就是说图片路径是有变化的。
解决方法（在方法二的基础上改进的）：
使用require将图片进入，写法如下：
-
data: () => ({
-
logo: 'this.src="' + require('../assets/img.png') + '"'
-
})
注：我是在data里就将字符串拼接好了，当然也可以在onerror方法里拼接，这里就不赘述了。
然后在img的onerror方法中调用：
<img v-bind:src="userData.photo" :onerror="logo" class="img-box4">在v-bind标签中，单引号' '引用的内容作为字符串存在；双引号" "引用的内容作为变量/表达式存在，可以进行运算。
最近在学习Vue时，遇到了一个问题，就是从后台传过来的图片路径无效时，需要在页面显示默认图片
本人试了3种方法，2种方法失败了
失败方法一：
见http://blog.csdn.net/qq_32786873/article/details/53483951
失败方法二：直接把图片路径直接写在data里面作为变量传到模板中，但是却发现图片还是出不了，以为是图片路径的问题，查了半天才发现项目启动后图片的路径并不是我们写的路径了。比如我们写的图片路径是：../assets/img.png，但是在网页开发者工具查看时路径却是：/static/img/img.4aa0af1.png，也就是说图片路径是有变化的。
解决方法（在方法二的基础上改进的）：
使用require将图片进入，写法如下：
-
data: () => ({
-
logo: 'this.src="' + require('../assets/img.png') + '"'
-
})
注：我是在data里就将字符串拼接好了，当然也可以在onerror方法里拼接，这里就不赘述了。
然后在img的onerror方法中调用：
<img v-bind:src="userData.photo" :onerror="logo" class="img-box4">在v-bind标签中，单引号' '引用的内容作为字符串存在；双引号" "引用的内容作为变量/表达式存在，可以进行运算。