image url 使用

• http
• 相对路径
• Data URLs

DataURLs

语法

Data URLs 由四个部分组成：前缀（数据:)，指示数据类型的MIME类型，如果非文本则为可选的base64令牌，数据本身：

data:[<mediatype>][;base64],<data>

mediatype 是个 MIME 类型的字符串，例如 "image/jpeg" 表示 JPEG 图像文件。如果被省略，则默认值为 text/plain;charset=US-ASCII

如果数据是文本类型，你可以直接将文本嵌入 (根据文档类型，使用合适的实体字符或转义字符)。如果是二进制数据，你可以将数据进行base64编码之后再进行嵌入。

下面是一些示例：

data:,Hello%2C%20World!
简单的 text/plain 类型数据
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D
base64 编码过的数据
data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E
一个HTML文档源代码 <h1>Hello, World</h1>
data:text/html,<script>alert('hi');</script>
一个会执行 JavaScript alert 的 HTML 文档。注意，script 闭标签是必须的。

给数据作 base64 编码

在Linux或者Mac OS系统上，你可以使用 uuencode 命令行工具来简单实现编码：

uuencode -m infile remotename

infile 参数表示要作 base64编码的文件名称，remotename is the remote name for the file, which isn't actually used in data URLs.

输出结果如下：

begin-base64 664 test
YSBzbGlnaHRseSBsb25nZXIgdGVzdCBmb3IgdGV2ZXIK
====

在网页上使用 JavaScript

Web APIs 已经有对 base64 进行编码解码的方法: Base64 encoding and decoding.

常见问题

下文介绍一些在使用data URIs时遇到的常见问题:

• 语法
  data URLs 的格式很简单，但很容易会忘记把逗号加在 "data" 协议名后面，在对数据进行 base64 编码时也很容易发生错误。
• HTML代码格式化
  一个 data URL 是一个文件中的文件，相对于文档来说这个文件可能就非常的长。因为 data URL 也是 URL，所以 data 会用空白符(换行符, 制表符, 空格)来对它进行格式化。但如果数据是经过 base64 编码的，就可能会遇到一些问题。
• 长度限制
  虽然 Firefox 支持无限长度的 data URLs，但是标准中并没有规定浏览器必须支持任意长度的 data URIs。比如，Opera 11浏览器限制 URLs 最长为 65535 个字符，这意外着 data URLs 最长为 65529 个字符（如果你使用纯文本 data:, 而不是指定一个 MIME 类型的话，那么 65529 字符长度是编码后的长度，而不是源文件）。
• 缺乏错误处理
  MIME类型错误或者base64编码错误,都会造成data URIs无法被正常解析, 但不会有任何相关错误提示.
• 不支持查询字符串
  一个data URI的数据字段是没有结束标记的,所以尝试在一个data URI后面添加查询字符串会导致,查询字符串也一并被当作数据字段.例如:

data:text/html,lots of text...<p><a name%3D"bottom">bottom</a>?arg=val

这个 data URL 代表的 HTML 源文件内容为:

lots of text...<p><a name="bottom">bottom</a>?arg=val

浏览器兼容性

image.png