image url 使用
- http
- 相對路徑
- Data URLs
DataURLs
語法
Data URLs 由四個部分組成：前綴（數(shù)據(jù):)槽棍，指示數(shù)據(jù)類型的MIME類型捉蚤，如果非文本則為可選的base64令牌，數(shù)據(jù)本身：
data:[<mediatype>][;base64],<data>
mediatype 是個 MIME 類型的字符串炼七，例如 "image/jpeg" 表示 JPEG 圖像文件缆巧。如果被省略，則默認值為 text/plain;charset=US-ASCII
如果數(shù)據(jù)是文本類型豌拙，你可以直接將文本嵌入 (根據(jù)文檔類型盅蝗，使用合適的實體字符或轉(zhuǎn)義字符)。如果是二進制數(shù)據(jù)姆蘸，你可以將數(shù)據(jù)進行base64編碼之后再進行嵌入墩莫。
下面是一些示例：
data:,Hello%2C%20World!
簡單的 text/plain 類型數(shù)據(jù)
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D
base64 編碼過的數(shù)據(jù)
data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E
一個HTML文檔源代碼 <h1>Hello, World</h1>
data:text/html,<script>alert('hi');</script>
一個會執(zhí)行 JavaScript alert 的 HTML 文檔。注意逞敷，script 閉標簽是必須的狂秦。
給數(shù)據(jù)作 base64 編碼
在Linux或者Mac OS系統(tǒng)上，你可以使用 uuencode 命令行工具來簡單實現(xiàn)編碼：
uuencode -m infile remotename
infile 參數(shù)表示要作 base64編碼的文件名稱推捐，remotename is the remote name for the file, which isn't actually used in data URLs.
輸出結(jié)果如下：
begin-base64 664 test
YSBzbGlnaHRseSBsb25nZXIgdGVzdCBmb3IgdGV2ZXIK
====
在網(wǎng)頁上使用 JavaScript
Web APIs 已經(jīng)有對 base64 進行編碼解碼的方法: Base64 encoding and decoding.
常見問題
下文介紹一些在使用data URIs時遇到的常見問題:
- 語法
data URLs 的格式很簡單裂问，但很容易會忘記把逗號加在 "data" 協(xié)議名后面，在對數(shù)據(jù)進行 base64 編碼時也很容易發(fā)生錯誤牛柒。 - HTML代碼格式化
一個dataURL 是一個文件中的文件堪簿，相對于文檔來說這個文件可能就非常的長。因為 data URL 也是 URL皮壁，所以 data 會用空白符(換行符, 制表符, 空格)來對它進行格式化椭更。但如果數(shù)據(jù)是經(jīng)過 base64 編碼的，就可能會遇到一些問題蛾魄。 - 長度限制
雖然 Firefox 支持無限長度的 data URLs虑瀑，但是標準中并沒有規(guī)定瀏覽器必須支持任意長度的 data URIs湿滓。比如，Opera 11瀏覽器限制 URLs 最長為 65535 個字符舌狗，這意外著 data URLs 最長為 65529 個字符（如果你使用純文本 data:, 而不是指定一個 MIME 類型的話叽奥，那么 65529 字符長度是編碼后的長度，而不是源文件）痛侍。 - 缺乏錯誤處理
MIME類型錯誤或者base64編碼錯誤,都會造成data URIs無法被正常解析, 但不會有任何相關錯誤提示. - 不支持查詢字符串
一個data URI的數(shù)據(jù)字段是沒有結(jié)束標記的,所以嘗試在一個data URI后面添加查詢字符串會導致,查詢字符串也一并被當作數(shù)據(jù)字段.例如:
data:text/html,lots of text...<p><a name%3D"bottom">bottom</a>?arg=val
這個 data URL 代表的 HTML 源文件內(nèi)容為:
lots of text...<p><a name="bottom">bottom</a>?arg=val
瀏覽器兼容性
image.png
