HTML中圖片不存在顯示默認圖片的方法示例

一個圖片鏈接<img src="" /> 想用js 判斷url是否有效如果404 就加載默認的圖片路徑
<img src="xxx" οnerrοr="this.src=默認圖地址"/>
圖片標(biāo)簽img的 onerror事件
<img src="pic.gif" οnerrοr="javascript:this.src='默認圖地址';" alt="pic" />
分析:特別注意 onerror,當(dāng)圖片不存在時,將觸發(fā) onerror,而 onerror 中為 img 指定一個默認圖片。也就是說圖片存在則顯示 pic.gif,圖片不存在將顯示默認圖片。
存在的問題:如果默認圖片也不存在,則繼續(xù)觸發(fā) onerror,導(dǎo)致循環(huán),故出現(xiàn)錯誤。如果圖片存在,但網(wǎng)絡(luò)很不通暢,也可能觸發(fā) onerror。
解決方法:通過函數(shù)加載默認圖片,僅加載一次
<img src="abc.jpg" onerror="nofind()" /> <script type="text/javascript"> function nofind(){ var img=event.srcElement; img.src="http://mat1.gtimg.com/cd/2017/home/nlogo0518.png"; //替換的圖片 img.onerror=null; //控制不要一直觸發(fā)錯誤 } </script>
到此這篇關(guān)于HTML中圖片不存在顯示默認圖片的方法示例的文章就介紹到這了,更多相關(guān)HTML圖片不存在顯示默認內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
- 這篇文章主要介紹了Html讀取本地文件夾下圖片并顯示的示例代碼的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-13
HTML中img標(biāo)簽只顯示圖片中心位置的方法(三種方法)
html中 img標(biāo)簽顯示圖片中心的方法目前知道三種,下面小編把他分享到腳本之家平臺,需要的朋友參考下2017-04-13Html中使用自定義圖片來實現(xiàn)checkbox顯示的方法
下面小編就為大家?guī)硪黄狧tml中使用自定義圖片來實現(xiàn)checkbox顯示的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-18瀏覽器全屏顯示背景圖片的css樣式與html結(jié)構(gòu)
全屏顯示背景圖片,在某些時候非常需要,那么如何實現(xiàn)瀏覽器全屏顯示呢?下面有個不錯的示例,感興趣的朋友可以參考下2014-04-15- 發(fā)送html郵件的建議:用style寫內(nèi)聯(lián)的CSS;少用圖片;用table實現(xiàn)左右布局或者更復(fù)雜的布局;用background元素設(shè)置背景圖片等。 幾乎每個會員制網(wǎng)站都需要2009-04-02