在 HTML 中显示 Base64 图像

Subodh Adhikari 2023年1月30日 2022年1月2日
  1. 在 HTML 中使用 img 标签显示 Base64 图像
  2. 使用 base64_encode() PHP 函数使用 HTML 显示 Base64 图像
在 HTML 中显示 Base64 图像

本教程将介绍在 HTML 中显示 base64 图像的方法。Base64 图像是由 base64 编码算法转换的可读字符串。

在 HTML 中使用 img 标签显示 Base64 图像

我们可以使用 img 标签将 Base64 编码的图像嵌入到 HTML 文档中。它非常有用,因为页面加载速度更快,因为浏览器不需要为较小的图像发出额外的页面加载请求。我们可以在 img 标签的 src 属性中指定图像的 URL。我们可以通过在 src 属性中提供有关图像的信息来显示 base64 图像。我们需要在 src 属性中定义准确的内容类型、内容编码和字符集。语法如下所示。

data:[content-type][;charset],<data>

我们可以将内容类型指定为 image/png,表示该字符串是一个 PNG 图像。然后,我们可以将字符集指定为 base64。分号分隔内容类型和字符集。之后,我们可以指定图像的 base64 字符串。我们可以使用像这里之类的工具将图像转换为 base64 图像。我们还可以从这里的链接创建自定义 base64 图像。这样,我们可以使用 img 标签在 HTML 中显示 base64 图像。

示例代码:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAJUlEQVR42u3NQQEAAAQEsJNcdFLw2gqsMukcK4lEIpFIJBLJS7KG6yVo40DbTgAAAABJRU5ErkJggg=="> 

使用 base64_encode() PHP 函数使用 HTML 显示 Base64 图像

我们可以使用 base64_encode() PHP 函数将图像编码为 base64 字符串。mime_content_type() 函数返回提供给它的数据的内容类型。使用这些函数,我们可以为 img 标签生成一个 src。因此,我们可以显示 base64 图像。我们可以使用 file_get_contents() 函数来读取要转换为 base64 字符串的图像。

例如,创建一个 $img 变量并存储图像的 URL。接下来,使用 file_get_contents() 函数读取图像并使用 base64_encode() 函数将图像转换为 base64 字符串。接下来,在 img 变量上使用 mime_content_type() 函数来获取内容类型。然后,创建一个变量 imgSrc 并根据上面的语法排列变量。最后,使用 echo 函数显示 HTML img 标签,其中 src 属性设置为 $ImgSrc 变量。

因此,我们可以使用 PHP 来显示 base64 图像。

示例代码:

$img = 'https://loremflickr.com/320/240';
$imgData = base64_encode(file_get_contents($img));
$imgSrc = 'data: ' . mime_content_type($img) . ';base64,' . $imgData;
echo '<img src="' . $imgSrc . '">';

相关文章 - HTML Image