img標籤設置默認圖片

 爲了美觀當網頁圖片不存在時不顯示叉叉圖片瀏覽器

當在頁面顯示的時候,萬一圖片被移動了位置或者丟失的話,將會在頁面顯示一個帶X的圖片,非常影響用戶的體驗。即便使用alt屬性給出了」圖片XX」的提示信息,也起不了多大做用。
其實,能夠這樣處理:當圖片不存在的時候,會觸發onerror事件,咱們能夠在該事件中作一下補救的工做,好比:測試

一、讓這個圖片元素隱藏:this

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

二、用默認的圖片替換:url

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

注意:若是使用不當,在IE內核的瀏覽器下會形成死循環。spa

好比:當【默認圖片的url地址】也加載不成功(好比網速比較慢的時候)或不存在的話,就會反覆的加載,最後形成堆棧溢出錯誤。code

所以, 須要用下面兩種方法解決:blog

a、更改 onerror 代碼爲其它處理方式或者確保 onerror 中的默認圖片足夠小,而且存在。事件

b、控制onerror事件只觸發一次,須要增長這句話:this.onerror=null; 增長後以下:圖片

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

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

相關文章
相關標籤/搜索