img標簽設置默認圖片
為了美觀當網頁圖片不存在時不顯示xx圖片。
當在頁面顯示的時候,萬一圖片被移動了位置或者丟失的話,將會在頁面顯示一個帶X的圖片,很是影響用戶的體驗。其實,可以這樣處理:當圖片不存在的時候,會觸發onerror事件,我們可以在該事件中做處理。
1、讓這個圖片元素隱藏:
<img src="./img/img.png" alt="img.png" onerror="this.style.display='none'"/>
2、用默認的圖片替換:
<img src="./img/img.png" alt="img.png" onerror="this.src='./img/defaultImg.png'"/>
注意:當【默認圖片的url地址】也加載不成功(比如網速比較慢的時候)或不存在的話,就會反復的加載,最后造成堆棧溢出錯誤。
因此, 需要用以下方法解決:
控制onerror事件只觸發一次,需要增加這句話:this.onerror=null; 增加后如下:
<img src="./img/img.png" alt="img.png" onerror="this.src='./img/defaultImg.png';this.onerror=null;"/>
效果如下: