3

Don't hit me too soon!

I know how to add an image in a HTML page... But I want to add the actual image file in this HTML page.

There it is, I want my html page standalone, without any folder or file with it. I put the css in the <style> balise for example. Now, I would like to do the same with an image.

First question: Is it possible?

Second question: Is the imported image file could be added more than once in the HTML?

I don't know if I am understandable, so, there is an example of what I want:

<html>
    <head>
        <file byte="A02AB46213F541F...ABCD542" ref="my_ref" />
    </head>
    <body>
        <img src="my_ref" />
    </body>
</html>
Marc
  • 392
  • 1
  • 3
  • 11
  • 3
    This link tells you how to do it: http://sveinbjorn.org/news/2005-11-28-02-39-23/Embedded-image-data-in-HTML-documents.html – edtheprogrammerguy Aug 22 '13 at 13:18
  • Thank you very much! You answered my first question. Now it could be great if I can make a reference with my embedded resource because I will need this image a thousand time in my HTML page (Second question) – Marc Aug 22 '13 at 13:22
  • And for the second question no, I don't think that's possible using data URLs. – Alex Paven Aug 22 '13 at 13:22
  • use the img tag .. Italian Trulli the answer from this https://www.w3schools.com/html/html_images.asp – Khalda Nawaf Jul 02 '19 at 01:39

2 Answers2

3

I finally found!

Thanks to... Stackoverflow actualy ^^

The solution I found is really simple. Just use the Data Url in the css! Ok so now my html code is really unreadable, but the html file is really simple!

EDIT : I though a little example could be great for any others:

<html>
    <head>
        <style>
            .myImage
            {
                background-image: url("data:image/png;base64,iVBORw0KG...ggg==");
                background-repeat: no-repeat;
                background-position: center;
            }
        </style>
    </head>
    <body>
        <div class="myImage">
        </div>
    </body>
</html>
Community
  • 1
  • 1
Marc
  • 392
  • 1
  • 3
  • 11
1

You can also put the data in the src attribute of an img tag.

<IMG  src="data:image/png;base64,iVBORw0KGg....ggg==">
Terrik
  • 69
  • 3