img請求圖片錯誤設置默認圖片

1. 問題

最近在開發的時候遇到一個問題，就是伺服器明明返回了用戶頭像的鏈接，但是由於鏈接已經在伺服器中不存在，也就是那個圖像的url地址已經不存在了。需求是：當用戶沒有頭像的時候給他一個默認的頭像。這裡就遇到一個問題了，就是伺服器已經返回了頭像，我怎麼知道他是不是沒有頭像呢？ 為了這個問題，我對產品說我做不到，我無法知道這個鏈接是否有效，做不到。

2. 解決

和產品說完之後，我查了下資料，發現我錯了，原來img標籤還有一個onerror的屬性，omg，原諒我書讀得少，看來一定要虛心學習，耐心請教啊，不能一味的說做不到，這個現實不了。

2.1 原生js

例如，有以下代碼：

<img src="圖片的url地址" alt="圖片XX"/>

當在頁面顯示的時候，萬一圖片被移動了位置或者丟失的話，將會在頁面顯示一個帶X的圖片，很是影響用戶的體驗。即使使用alt屬性給出了"圖片XX"的提示信息，也起不了多大作用。 其實，可以這樣處理：當圖片不存在的時候，會觸發onerror事件，我們可以在該事件中做一下補救的工作，比如：

1、讓這個圖片元素隱藏：

<img src="圖片的url地址" alt="圖片XX" onerror="this.style.display="none""/>

2、用默認的圖片替換：

<img src="圖片的url地址" alt="圖片XX" onerror="this.src="默認圖片的url地址""/>

注意:

注意：如果使用不當，在IE內核的瀏覽器下會造成死循環。比如：當【默認圖片的url地址】也載入不成功（比如網速比較慢的時候）或不存在的話，就會反覆的載入，最後造成堆棧溢出錯誤。 因此， 需要用下面兩種方法解決： a、更改 onerror 代碼為其它處理方式或者確保 onerror 中的默認圖片足夠小，並且存在。 b、控制onerror事件只觸發一次，需要增加這句話：this.onerror=null; 增加後如下：

<img src="圖片的url地址" alt="圖片XX" onerror="this.src="默認圖片的url地址;this.onerror=null""/>

經測試，上面的方法在IE各個版本及谷歌、火狐瀏覽器中都支持。

以上方法適合<img>較少的情況，如果要處理的<img>比較多的話，可以做一個全局性的設置：

可以寫一個js腳本，讓其遍歷頁面所有的<img>標籤，給每個標籤添加error事件，當任何地方的圖片不存在時都可以進行統一的處理。

其實，jQuery就有這個方便的功能，可以參考此處：http://www.w3school.com.cn/jquery/event_error.asp 不過，經測試，在IE下面好像不好使。（大家可以用IE瀏覽器打開上面的網址試試）

2.2 react中解決

原理一樣，直接上代碼

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！