1360600 - Broken image icon shows up on top of the image, but does not show up in Google Chrome

Status: RESOLVED INVALID

(Core :: Layout: Images, Video, and HTML Frames, defect)

Description

[tom.mai78101]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:52.0) Gecko/20100101 Firefox/52.0
Build ID: 20170323105023

Steps to reproduce:

Here's a JsFiddle link:

https://jsfiddle.net/8qL2gox3/

It's a simple CSS styling issue with an <img> with no "src" attribute, but uses CSS background property to set the image via url().


Actual results:

In Google Chrome, you do not see a white, broken image icon, overlaid on top of the actual icon (on top of the head).

In Firefox, you do get to see the actual icon.


Expected results:

On both browsers, it should be consistent. I don't know how the CSS rules are doing this, or whether my CSS styles are wrong/incorrect, but at the very least, I want to see the same results on both browsers.

Comment 1

[Tomislav Jovanovic :zombie]

(In reply to tom.mai78101 from comment #0)
> It's a simple CSS styling issue with an <img> with no "src" attribute, but
> uses CSS background property to set the image via url().

That's not setting the "image", it's setting the background.  This is how Firefox displays broken images, so either set it to an clear png, or switch to a different element, like <span>.

Comment 2

[tom.mai78101]

Just resolved my issue. I kept the <img> in, but I hard-coded the encoded base-64 image into the src attribute.

Mostly because of backwards compatibility reasons on our end, hence we're forced to use <img>.

But thanks for your suggestion. I'll keep a note on this.