Lazy loading images without placeholder shows brief broken image icon and alt text

[janvitos]

Hi,

Since version 1.4.8, the new lazy loading method without a placeholder shows a brief broken image icon and the alt text.

See screenshot here: https://imgur.com/a/6QjWJZ1

I'm not sure if this was intended or not, but it's not too pretty.

[lkraav]

Since version 1.4.8, the new lazy loading method without a placeholder shows a brief broken image icon and the alt text.

Have you been able to identify what the DOM markup is like at that "broken" moment?

[gerdneuman]

@janvitos I guess this means that the img does not get loaded successfully. (with loaded I mean lazyloaded). I guess you should look into the Network tab of the devtools to see if there's an error. https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor

[xianx]

In new version as image place holder is removed image are not showing and showing src unknown see the screenshots https://techtun.es/hubsQ9 and as a result images are are showing broken https://techtun.es/Ead86Q

Now how to fix them.

[janvitos]

You can fix this problem by adding this line to your CSS file:

img[src=""] { visibility: hidden; }

This will hide all missing images and prevent the broken image thumbnail from showing.

[smarteist]

You can fix this problem by adding this line to your CSS file:

img[src=""] { visibility: hidden; }

This will hide all missing images and prevent the broken image thumbnail from showing.

In addtion to @janvitos answer we can add:

//lazyload images

img[src=""],
img:not([src]) {
  visibility: hidden;
}