<img> tag greyed out in firebug hence found the reason for image not showing up. Need help fixing it

Question

I'm debugging a website for missing images. The website heavily uses GWT hence the source code is not so verbose. I started debugging it with firebug and found out that the tags are all greyed out in the firebug DOM source. If I edit the image tag in firebug console, say by adding just a space, then the image tag is not greyed anymore hence showing up on the page.

Can someone here please point out why the image tags are greyed out in firebug and how to resolve this issue. Note: there are other images in the page which are working just fine, even they are generated using GWT in the same way.

Answer 1

I had the same issue with social networks icons, and it was also Ad-Blocker (under Firefox) causing it. The alternative text of the icons had alt="Facebook" (Twitter, Instagram) in it. Changing that to alt="Facebook_xxx" was enough to solve the issue.

Answer 2

Most likely - the image is hidden (via CSS probably). Click on the tag to see the styles applied to it - most likely you'll see display: none or something of similar effect.
As to why the image(s) are hidden - either the CSS rules got mixed up and resulted in such behaviour (Firebug should help with the investigation) or it's part of the application logic (hide the progress bar when not needed, etc).

Answer 3

In my case my image was grayed (greyed) out in firebug due to the image having its height and width to 0 px so effectively it was hidden on the screen. so i deduce that grayed out means its not visible on the screen.