如何在没有外部链接的情况下将 PNG 图像直接嵌入到 HTML 页面中？

在 HTML 页面中嵌入 PNG 图像

在数字领域，图像在增强用户体验和传达视觉信息方面发挥着至关重要的作用。 Web 开发人员面临的一个常见问题是如何将可移植网络图形 (PNG) 图像直接嵌入到 HTML 页面中，而不从外部链接到该页面。

使用 Base64 编码嵌入图像

要将 PNG 图像嵌入 HTML，我们可以利用 Base64 编码。此过程将二进制图像数据转换为可以嵌入 HTML 代码中的字符串。

一些在线 Base64 编码器可以协助完成此任务。推荐的工具位于 http://www.greywyvern.com/code/php/binary2base64。

对图像进行编码后，您可以使用以下两种方法之一嵌入它：

1。使用 CSS 背景图像属性：

创建一个 div 元素并将其背景图像属性设置为 Base64 编码的字符串。例如：

<code class="css">div.image {
  width: 100px;
  height: 100px;
  background-image: url(data:image/png;base64,iVBORwA<MoreBase64StringHere>);
}</code>

2。使用 标签：

或者，您可以使用 标签直接嵌入图像。 src 属性将编码字符串作为其值。例如：

<code class="html"><img alt="My Image" src="data:image/png;base64,iVBORwA<MoreBase64StringHere>" /></code>

通过使用这些方法，您可以成功地将 PNG 图像嵌入到 HTML 页面中，从而无需外部文件引用即可显示它们。

以上是如何在没有外部链接的情况下将 PNG 图像直接嵌入到 HTML 页面中？的详细内容。更多信息请关注PHP中文网其他相关文章！