2009-06-05 20 views
3

Ich habe die Kontrolle in einer Seite, die HTML aus Textdatei erhält und html in der Webseite rendert. Im Moment muss es irgendwo ein Bild hinzufügen und auf dieses Image src verweisen.Ist es möglich, ein Bild mit HTML zu rendern?

Ich frage mich, ob wir Bild zusammen mit anderen HTML-Code rendern können, ist es möglich?

Antwort

8

Ja, ist es. Sie benötigen ein Data URI scheme:

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

Das gleiche in CSS getan werden kann:

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; } 
+7

Beachten Sie, dass nur sehr aktuelle Versionen von IE Daten-URIs unterstützen. –

1

ich es durch die Schaffung einer Tabelle mit einer Zelle für jedes Pixel durchgeführt gesehen haben, die Hintergrundfarbe der Zelle Einstellung die Farbe des Pixels.

+2

Beachten Sie, dass, während dies möglich ist, es ein Hack ist und neigt dazu, Browser zu crawlen, wie sie mit einem großen DOM umgehen. – Quentin

+0

Als Office-Witz habe ich vor einigen Monaten ein Python-Skript geschrieben, um genau das zu tun. Sie können gerne damit herumspielen, aber David hat darauf hingewiesen, dass es riesige Mengen an HTML produziert, die die Browser verlangsamen. Bei meinen Tests wird irgendetwas über 3.5MB HTML einen Browser zum Absturz bringen, was ein Bild von der Größe 500x500 ist. https://gist.github.com/705023 –

2

Sie können auch Bilder mit CSS und Zeichen unterschiedlicher Größe erstellen und mit Z-Indizes spielen. Hier ist CSS Homer.

+0

+1 für diese wirklich s (l) ick Idee. –

Verwandte Themen