在 html 中显示 base64 图像-ag捕鱼王app官网

当前位置：ag捕鱼王app官网 > > web前端 > html >

vue react javascript angular css html

在 html 中显示 base64 图像

作者：迹忆客最近更新：2023/03/27 浏览次数：

本篇文章将介绍在 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 '. $imgsrc . '">';

下一篇：在 html 中缩放图像

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

发布时间：2023/05/06 浏览次数：218 分类：html

本篇文章介绍了如何在 html 中制作只读复选框。本文是关于如何使 html 复选框控件成为只读组件的快速破解。但是，首先，让我们简要介绍一下复选框控件。

在 html 中显示 base64 图像-ag捕鱼王app官网