網頁中預設圖片的幾種解決方式
現在網頁中圖片隨處可見,但避免不了有時會出現圖片資源失敗的情況,在谷歌瀏覽器中就會顯示這樣
<img src="logo.jpg" alt="logo">
這裡的alt
屬性是為了當圖片載入失敗時告訴使用者圖片資訊的
能不能美化一下呢?
下面給出幾種方式
js 方式
相信大家碰到這種問題是,搜尋的結果一般都是用圖片的onerror
方法
onerror
事件會在文件或影象載入過程中發生錯誤時被觸發。
在裝載文件或影象的過程中如果發生了錯誤,就會呼叫該事件控制代碼。
使用方式也很簡單
<img src="logo.jpg" alt="logo" onerror="this.src='https://xxx.img/logo.png'">
但是,這個方法一定要注意,保證onerror裡面賦值的圖片地址一定不能出錯,否則,就會無限呼叫onerror...
頁面直接崩掉..
有人說,我可以保證呀。那麼,既然能保證,為什麼還會有前面圖片載入失敗,而啟用備用圖片的情況發生呢?
當然,你可以採用base64
的方式,缺點就是太長..類似下面這種
<img src="logo.jpg" alt="logo"onerror="this.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAYAAABS3GwHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZu...IIggggCCKAIIgAgiACCIIIIAgigCCIAIIgAgiCCCAIIoAgiACCIAIIQm7xfwIMAADDZPsh5DI6AAAAAElFTkSuQmCC'">
相容性還是可以的,基本滿足日常開發。
那麼有沒有css解決方式呢?
當然有,如果只用相容主流瀏覽器的話
css 方式
這裡提供兩種方式
偽元素
雖然img
是單標籤<img>
,裡面不能包裹其他元素,但是卻可以包含偽元素
不過這裡有個特徵,只有當圖片載入失敗或者沒有圖片的時候,才會顯示偽元素
既然如此,我們可以用偽元素來實現一個預設提示效果
img{ display: inline-block; position: relative; width: 200px; height: 200px; background: #ccc; vertical-align: top; } img:after{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('img/b.jpg') #ccc; }
思路很簡單,就是用偽元素覆蓋在原圖片上,而且圖片載入失敗也沒什麼問題,最多不顯示,也可以以純色背景作為預設佔位圖。
背景圖片
還有一種方式,用到了css3
中的多背景特性
div{
background:url(a.jpg),
url(b.jpg),
url(logo.png);
}
指定的時候,按瀏覽器中顯示時影象疊放的順序從上往下指定的,第一個影象檔案是放在最上面的,最後指定的檔案是放在最下面的。
這樣我們也可以實現預設圖片的顯示
.img{
width: 200px;
height: 200px;
background: url('a.png'),url('logo.png') #f1f1f1
}
不過這種方式本質上是多張圖片重疊在一起,如果上一層載入失敗,才會看得見底下的那一張,也就是說如果都載入成功,其實都是存在的。那麼就要主要了,如果上層的圖有透明部分,就有可能看得到底下的圖,漏光了!
如上,兩張圖都載入成功了,由於上層有透明部分,所以看到了底圖。所以在使用這種情況的時候,需要使用.jpg
圖片,避免走光
小節
以上介紹了三種設定預設圖片的方式,
從相容性方面來講,js
方法適應性最廣,可以低版本相容ie
,其他兩種就不行了,只需注意備用圖片地址不要出錯就可以了
個人比較建議第二種偽元素方式,純css
方式,html
可以不做任何修改,適合對已有專案的體驗升級,有了體驗更好,沒有也無傷大雅
第三種就可以當娛樂看看了,當做一種思維方式吧,畢竟沒有任何語義化,給一個div
,別人根本就不知道這是一張圖片,對搜尋引擎也不友好。
各位小夥伴還有什麼更好的方式呢? ^^