圖片載入失敗，所導致的瀏覽器安全色問題

網站當中經常會遇到圖片載入失敗的問題，img中有地址，但是地址開啟是錯誤的。情況如下：

不同瀏覽器處理錯誤圖片是不一樣的，有的乾脆就顯示差號，例如IE，有的顯示一張破碎的圖片，有的則是給一張高度比較大的預設圖，例如PC端的Firefox，IOS中Safari,還有安卓中的UC瀏覽器。這樣在手機中就會導致左右兩側圖片高度不一致！如下圖：

解決方案

其實這裡解決很簡單，判斷當圖片載入失敗的時候給一個預設圖就可以了，不讓瀏覽器使用其內建的預設圖。

<img src=http://www.aseoe.com/"http://www.aseoe.com/images/logo.png" onerror="javascript：this.src='http://www.aseoe.com/images/logo.png';" alt="pic" />

衍生問題

因為圖片載入失敗進入預設圖，那麼預設圖再載入失敗怎麼辦呢？這不是進入一個死迴圈嗎？

最簡單的一個解決辦法是，onerror中的圖保證能開啟，保證比較小！不會出現問題！。這個方法也是最有效方法！

假如你不能保證，那麼，只能靠函數來解決這個問題了！

思路是：

當圖片載入失敗，進入onerror的時候，判斷onerror的圖片是不是能載入，在onerror中的圖片觸發onerror的時候，設定onerror為null。

代碼如下：

<img src=http://www.aseoe.com/"logo.png" onerror="nofind();" /><script type="text/javascript">      function nofind(){          var img=event.srcElement  event.target ;  //擷取img對象，Firefox是event.target ，IE及Google其他是event.srcElement         console.dir(img);//大家可以列印看一下        img.src=http://www.aseoe.com/"http://www.aseoe.com/statics/images/nopic.gif";         img.onerror=null;       }  </script>