方法一：

首先看看以前（非vue）项目是怎么设置img标签的默认图片：

// 设置默认图片
<img src="http://res.spreadwin.com/gmc38PE.jpg" alt="" onerror="this.src='images/default.png'">

上面的方法一般时候没有问题，当src中的资源不存在或无法正常访问时，就会显示默认图片“default.png”。

但是当onerror中设置的图片路径也不存在时就会导致浏览器一直加载这个图片资源，造成堆栈溢出错误。为了完善我们通常在后面加上this.οnerrοr=null;保证onerror里的事件只执行一次，如下：

// 设置默认图片
<img src="http://res.spreadwin.com/gmc38PE.jpg" alt="" onerror="this.src='images/default.png';this.onerror=null">

如果我们在vue项目同样这么设置，会发现无效（默认图片不显示）。原因是webpack打包时找不到资源文件，需要用到下面的方法。

方法二：

// 内容
<img :src="item.url" alt="" :onerror="defaultImg">

// js
export default {
    ...
    computed: {
        defaultImg () {
            return 'this.src="' + require('images/default.png') + '"';
        }
    }
}

这样就可以了~