方法一：

首先看看以前（非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') + '"';}} }

這樣就可以了~

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。