是否可以用html渲染图像？

Question

我控制了一个从文本文件中获取html并在网页中呈现html的页面。 现在它必须在某处添加图像并引用该图像src。

我想知道我们是否可以将图像与其他HTML代码一起渲染，是否可能？

Answer 1

是的，确实如此。您需要Data URI scheme：

<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />

在CSS中也可以这样做：

ul.checklist > li.complete { margin-left: 20px; background:
  url('data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAA
ABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/5
8ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/A
FGGFyjOXZtQAAAAAElFTkSuQmCC') top left no-repeat; }

Answer 2

您可以使用内联SVG。请参阅此article for mozilla和此one for IE。

Answer 3

您还可以使用CSS和不同大小的字符创建图像并使用z-index进行播放。这是CSS Homer。

Answer 4

我已经看到它通过为每个像素创建一个包含一个单元格的表格来完成，将单元格的背景颜色设置为像素的颜色。