如何将图像编码为HTML文件

Question

所以这可能是一个奇怪的问题，但请耐心等待。我正在为网站设计一个代码块。我正在创建一个

<div></div>

元素包含其中的所有内容。 样式标记包含在其中，脚本标记也包含在内。为了便于设计，他们希望只有一个带有脚本和CSS的HTML文件。我还有一个我正在使用的背景图像。它在网页的其他地方使用，并且应该在代码插入网站时显示＆gt;但是，由于我无法验证这一点，我想将图像包含在HTML文件中。我不是在谈论图片标签（如下所示）

<img src='image.jpg/>

我说的是以某种方式将图像包含或编码到物理HTML文件中，因此没有单独的HTML文件和JPEG文件，只有一个HTML文件。这甚至可能吗？如果是这样，怎么样？

编辑：感谢Base64的帮助，但这可能相当长，并为HTML文件添加了一大堆长度。还有其他可能的解决方案吗？

Answer 1

您可以对图像数据进行base64编码，因此最终会得到类似这样的内容

<img src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////
wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4ML
wWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw=="
alt="Base64 encoded image" width="150" height="150"/>

以下是一些资源：

Base64 image converter

http://www.bigfastblog.com/embed-base64-encoded-images-inline-in-html

Embedding Base64 Images