CODEWITHSUNDEEP
htmlimageembedded-resource
Marc
Marc

Reputation: 392

How to insert an image in a HTML page?

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>

Upvotes: 3

Views: 780

Answers (2)

Terrik
Terrik

Reputation: 169

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

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

Upvotes: 1

Marc
Marc

Reputation: 392

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>

Upvotes: 3

Related Questions