將圖片轉(zhuǎn)換成base64編碼的切心,在web網(wǎng)上一般用于小圖片上朽寞,不僅可以減少圖片的請求數(shù)量(集合到js挂洛、css代碼中),還可以防止因為一些相對路徑等問題導致圖片404錯誤超营。
示例demo:
Base64.html
<html>
<head>
<title>測試img顯示Base64圖片源</title>
</head>
<body>
<img src='data:image/png;base64,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'
/>
</body>
</html>
渲染效果如圖:
001.JPG
應用很簡單鸳玩。一張圖片轉(zhuǎn)化base64格式后就會生成一堆字符串,直接應用是不行的糟描,必須在前面加上相應的說明“data:image/png;base64,”怀喉,否則,無法正常顯示船响。
一般的在線轉(zhuǎn)化工具生成的圖片Base64格式字符串都是包含這些頭信息的,粘貼上去直接就能使用躲履。
附:
data:text/plain,文本數(shù)據(jù)
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圖片數(shù)據(jù)
data:image/png;base64,base64編碼的png圖片數(shù)據(jù)
data:image/jpeg;base64,base64編碼的jpeg圖片數(shù)據(jù)
data:image/x-icon;base64,base64編碼的icon圖片數(shù)據(jù)