CODEWITHSUNDEEP
htmlcssimage
1.21 gigawatts
1.21 gigawatts

Reputation: 17830

Override image source with style declaration containing base64 image data?

Let's say I have an image in a document that point to a standard default no image. Is it possible to specify a class that I can use to overwrite that value with a base64 value?

HTML: 

<img src="loading_icon.png" class="image1"/>
<img src="loading_icon.png" class="image2"/>

CSS: 

<style>

    .image1 {
        src: text/base64: ABCD...;
    }

    .image2 {
        src: text/base64: ABCD...;
    }

</style>

Upvotes: 0

Views: 120

Answers (1)

Temani Afif
Temani Afif

Reputation: 273934

you can use content but it won't work in all the browsers

.image1 {
  content:url(https://i.picsum.photos/id/10/200/200.jpg)
}

.image2 {
  content:url(https://i.picsum.photos/id/17/200/200.jpg)
}
<img src="loading_icon.png" class="image1">
<img src="loading_icon.png" class="image2">

Upvotes: 1

Related Questions