CODEWITHSUNDEEP
javascripthtmlcssgoogle-chromefirefox
Snickbrack
Snickbrack

Reputation: 956

Display of images in Chrome and Firefox

Following HTML-String is correctly displayed as an image in Chrome but will not shown in Firefox:

<img class="blog__entry__image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="" style="background-image: url('/GBlog/content/images/post_images/28_09_2016_15_56_41_splist.png');">

The CSS-Class contains the following:

display: block;
width: 100%;
height: 300px;
background-size: cover;
background-position: center;
background-attachment: scroll;
border-image-width: 0;
border-style: none;
background-repeat: no-repeat;
box-shadow: none;
outline: none !important;

If I have multiple images of this setup then only the first one is not displayed.

Does anyone knows why this is happening?

Upvotes: 0

Views: 2185

Answers (1)

traktor
traktor

Reputation: 19301

The gif data URL seems to be at fault in Firefox. Replacing it with a 1px x 1px transparent image/png URL:

src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg=="

where the PNG dataURL came from canvasObject.toDataURL("image/png") in Firefox, made the background image visible in testing.

Update: an image/gif data URL, obviously produced using different source file and conversion method than yours also works:

src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="

Upvotes: 2

Related Questions