Data URI: 将文件转换为 URL
如果你想在网页上显示图片,最常用的方法就是使用 HTML 中的 img 标签并将其链接到一个图片文件的 URL。然而,在某些情况下,这种方式可能不太实际:例如,当你需要在代码中嵌入很小的图像或者要避免外部资源请求造成的性能问题时。
此时,Data URI 可以是一个非常有用的选择。它允许你将任何类型的文件(包括图像、音频、视频、甚至是 HTML 页面)编码成一个短的字符串,并将其作为 URL 使用。由于数据都被嵌入到了 URL 中,因此你不需要另外再进行文件请求。
以下是一个使用 Data URI 嵌入一张图片的示例:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAA
O9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
在这个示例中,我们使用了 base64 编码的 PNG 格式图片。注意在 data URI 中,你需要使用前缀 data:
并指定该文件的 MIME 类型(在这个示例中为 image/png
)。之后是一个逗号分隔符,后面跟着编码后的文件内容。
除了这个示例,还可以使用多种方式来生成 data URI,包括 JavaScript、命令行工具等。如果你需要将某些文件嵌入到网页中,并希望减少外部资源请求,Data URI 可以是一个非常好的选择。