網頁中默認圖片的幾種解決方式

如今網頁中圖片隨處可見，但避免不了有時會出現圖片資源失敗的狀況，在谷歌瀏覽器中就會顯示這樣

<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，別人根本就不知道這是一張圖片，對搜索引擎也不友好。

各位小夥伴還有什麼更好的方式呢？ ^^

---

你們若是喜歡個人博客，能夠多多關注一下