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

问题描述

如何将.png文件嵌入空白的file.html中，以便在任何浏览器中打开该文件时可以看到该图像？在这种情况下，图像文件没有链接到HTML，而是将图像数据嵌入HTML本身。

有几个base64编码器在线帮助你做到这一点，这可能是我见过的最好的：

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

那个页面显示你的主要选项是CSS：

  div.image {
 width：100px; 
 height：100px; 
 background-image：url（data：image / png; base64，iVBORwA< MoreBase64SringHere>）; 
 
  

或者< img>


 < img alt =我的图片src =data：image / png ; BASE64，iVBORwA< MoreBase64SringHere>中/> 
  




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? In this scenario the image file is not linked to from the HTML but rather the image data is embedded in the HTML itself.

解决方案

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

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

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屋！