如何在 HTML 中显示 Base64 图像-之路教程

如何使用 <img> 标签

<img> 标签有一个 src 属性并包含图像的数据 URL。
数据 URL 由两部分组成，用逗号分隔。
第一部分指定Base64编码的图片，第二部分指定图片的Base64编码字符串。
还添加一个 alt 属性。

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4
  //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

现在，查看完整代码，我们需要将上面显示的 <img> 标签放置在 <div> 元素中。

将 Base64 编码图像嵌入 HTML 的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
  </head>
  <body>
    <div>
      <p>From wikipedia</p>
      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4
        //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
    </div>
  </body>
</html>

如何在 HTML 中显示 Base64 图像

使用 Base64 编码的图像可以使用 <img> 标签嵌入到 HTML 中。

通过避免浏览器发出另外的 HTTP 请求，这有助于增加较小图像的页面加载时间。

Base64 编码和数据 URL 齐头并进，因为数据 URL 减少了浏览器显示 HTML 文档所需的 HTTP 请求数量。

在这个片段中，我们将演示如何在 HTML 中显示 Base64 图像。

日期：2020-06-02 22:15:08 来源：oir作者：oir

←如何在两列中显示无序列表

如何在隐藏溢出的 <span> 元素中显示省略号→

如何使用 <img> 标签

将 Base64 编码图像嵌入 HTML 的示例：

目录