web前端之網頁中幾種預設圖片的解決方式
現在網頁中圖片隨處可見，但避免不了有時會出現圖片資源失敗的情況，在谷歌瀏覽器中就會顯示這樣
這裡的alt屬性是為了當圖片載入失敗時告訴使用者圖片資訊的
能不能美化一下呢？
下面給出幾種方式
js 方式
相信大家碰到這種問題是，搜尋的結果一般都是用圖片的onerror方法
onerror事件會在文件或影象載入過程中發生錯誤時被觸發。
在裝載文件或影象的過程中如果發生了錯誤，就會呼叫該事件控制代碼。
使用方式也很簡單
但是，這個方法一定要注意，保證onerror裡面賦值的圖片地址一定不能出錯，否則，就會無限呼叫onerror…
頁面直接崩掉…
有人說，我可以保證呀。那麼，既然能保證，為什麼還會有前面圖片載入失敗，而啟用備用圖片的情況發生呢？
當然，你可以採用base64的方式，缺點就是太長…類似下面這種
相容性還是可以的，基本滿足日常開發。
那麼有沒有css解決方式呢？
當然有，如果只用相容主流瀏覽器的話
css 方式
這裡提供兩種方式
偽元素
雖然img是單標籤，裡面不能包裹其他元素，但是卻可以包含偽元素
不過這裡有個特徵，只有當圖片載入失敗或者沒有圖片的時候，才會顯示偽元素
既然如此，我們可以用偽元素來實現一個預設提示效果
思路很簡單，就是用偽元素覆蓋在原圖片上，而且圖片載入失敗也沒什麼問題，最多不顯示，也可以以純色背景作為預設佔位圖。
背景圖片
不過這種方式本質上是多張圖片重疊在一起，如果上一層載入失敗，才會看得見底下的那一張，也就是說如果都載入成功，其實都是存在的。那麼就要主要了，如果上層的圖有透明部分，就有可能看得到底下的圖，漏光了！
如上，兩張圖都載入成功了，由於上層有透明部分，所以看到了底圖。所以在使用這種情況的時候，需要使用.jpg圖片，避免走光
小節
以上介紹了三種設定預設圖片的方式，
從相容性方面來講，js方法適應性最廣，可以低版本相容ie，其他兩種就不行了，只需注意備用圖片地址不要出錯就可以了
個人比較建議第二種偽元素方式，純css方式，html可以不做任何修改，適合對已有專案的體驗升級，有了體驗更好，沒有也無傷大雅
第三種就可以當娛樂看看了，當做一種思維方式吧，畢竟沒有任何語義化，給一個div，別人根本就不知道這是一張圖片，對搜尋引擎也不友好。
最後：
“相信有很多想學前端的小夥伴，今年年初我花了一個月整理了一份最適合2018年學習的web前端乾貨，從最基礎的HTML+CSS+JS到移動端HTML5到各種框架都有整理，送給每一位前端小夥伴，53763，1707這裡是小白聚集地，歡迎初學和進階中的小夥伴。”
