如何在 HTML 中显示 Base64 图像

在 HTML 中，我们可以使用 img 标签来显示图像。通常情况下，我们需要指定一个 src 属性，并将其设置为图像的 URL。但如果我们想要将图像以 Base64 编码的形式直接嵌入 HTML 文件中，该怎么办呢？

以下是一些简单的步骤来显示 Base64 编码的图像：

1. 将图像转换为 Base64 编码，并将其嵌入到 HTML 文件中。

   以下是一个例子，将图像转换为 Base64 编码并嵌入到某个 HTML 文件中。

   <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
   AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
   9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
   

   在上面的代码中，src 属性指定了使用 data: URI 方案来嵌入图像。image/png 指示该图像是 PNG 格式。注意，下面的 Base64 字符串是图像的实际数据。请注意，在您的代码中，可以将 data:image/png;base64, 替换为相应图像的 MIME 类型和 Base64 编码的数据。

2. 保存文件并在浏览器中打开它。

   确认上述代码经过编码后是否可以正确显示图像。

   

显示 Base64 图像就是这么简单！

总结

在 HTML 中显示 Base64 图像需要以下一些简单的步骤：

1. 将图像转换为 Base64 编码。
2. 在 img 标签的 src 属性中指定 data: URI 方案，并将包含 MIME 类型和 Base64 编码的数据的字符串插入其中。

希望本文能够帮到你！