分享最近工作中載入圖片的一種方法:

如圖,背景圖片的url裡的路徑,先來解釋一下,data表示取得資料的協定名稱,image/png是資料型別名稱,base64是資料編碼方式,後邊的一堆是image/png檔案編碼後的資料.這是一種 Data URL scheme模式

目前Data URL scheme 支援的型別有:

data:,文字資料
data:text/plain,文字資料
data:text/html,HTML程式碼
data:text/html;base64,base64編碼的HTML程式碼
data:text/css,CSS程式碼
data:text/css;base64,base64編碼的CSS程式碼
data:text/javascript,Javascript程式碼
data:text/javascript;base64,base64編碼的Javascript程式碼
data:image/gif;base64,base64編碼的gif圖片資料
data:image/png;base64,base64編碼的png圖片資料
data:image/jpeg;base64,base64編碼的jpeg圖片資料
data:image/x-icon;base64,base64編碼的icon圖片資料

這樣做的好處是可以省掉一個http請求.