迹忆客 专注技术分享

本篇文章将介绍在 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 字符串。

示例代码：

<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://demo.com/320/240';
$imgData = base64_encode(file_get_contents($img));
$imgSrc = 'data: ' . mime_content_type($img) . ';base64,' . $imgData;
echo '<img src="' . $imgSrc . '">';