Is it possible to render image with html?

Question

I have control in a page that gets html from text file and renders that html in webpage. Right now it has to add image somewhere and reference that image src.

I was wondering if we can render image along with other html code, is it possible?

Answer 1

You can use inline SVG. See this article for mozilla and this one for IE.

Answer 2

Yes, it is. You need a Data URI scheme:

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

The same can be done in 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 3

I've seen it done by creating a table with one cell for each pixel, setting the cell's background color to the pixel's color.

Answer 4

You can also create images using CSS and different size characters and playing with z-indexes. Here's CSS Homer.