方法一：

首先看看以前（非vue）項目是怎么設(shè)置img標(biāo)簽的默認(rèn)圖片：

// 設(shè)置默認(rèn)圖片 <img src="http://res.spreadwin.com/gmc38PE.jpg" alt="" onerror="this.src='images/default.png'">

上面的方法一般時候沒有問題，當(dāng)src中的資源不存在或無法正常訪問時，就會顯示默認(rèn)圖片“default.png”。

但是當(dāng)onerror中設(shè)置的圖片路徑也不存在時就會導(dǎo)致瀏覽器一直加載這個圖片資源，造成堆棧溢出錯誤。為了完善我們通常在后面加上this.οnerrοr=null;保證onerror里的事件只執(zhí)行一次，如下：

// 設(shè)置默認(rèn)圖片 <img src="http://res.spreadwin.com/gmc38PE.jpg" alt="" onerror="this.src='images/default.png';this.onerror=null">

如果我們在vue項目同樣這么設(shè)置，會發(fā)現(xiàn)無效（默認(rèn)圖片不顯示）。原因是webpack打包時找不到資源文件，需要用到下面的方法。

方法二：

// 內(nèi)容 <img :src="item.url" alt="" :onerror="defaultImg">// js export default {...computed: {defaultImg () {return 'this.src="' + require('images/default.png') + '"';}} }

這樣就可以了~

?

總結(jié)

以上是生活随笔為你收集整理的vue项目设置img标签的默认图片的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。