我可以将 .png 图像嵌入 HTML 页面吗? [英] Can I embed a .png image into an HTML page?

问题描述

如何将 .png 文件嵌入到空白的file.html"中?这样当您在任何浏览器中打开该文件时，您都会看到该图像?

How can I embed a .png file into a blank "file.html" so that when you open that file in any browser you see that image?

在这种情况下，图像文件不是从 HTML 链接到的，而是图像数据嵌入在 HTML 本身中.

In this scenario, the image file is not linked to from the HTML, but rather the image data is embedded in the HTML itself.

推荐答案

有几个Base64 在线编码器可以帮助您解决这个问题，这可能是我见过的最好的:

There are a few Base64 encoders online to help you with this, and this is probably the best I've seen:

http://www.greywyvern.com/code/php/binary2base64

因为该页面显示您的主要选项是 CSS:

As that page shows your main options for this are CSS:

div.image {
  width:100px;
  height:100px;
  background-image:url(data:image/png;base64,iVBORwA<MoreBase64SringHere>);
}

或者 标签本身，像这样:

Or the <img> tag itself, like this:

<img alt="My Image" src="data:image/png;base64,iVBORwA<MoreBase64SringHere>" />

这篇关于我可以将 .png 图像嵌入 HTML 页面吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！