search

RevillWeb / img-2

Replace <img /> elements with <img-2> to automatically pre-cache images and improve page performance.
MIT License
1.89k stars 63 forks source link

Demo | Doesn't display `alt` text if request to image source is blocked by client #8

Open scriptype opened 6 years ago

scriptype commented 6 years ago

Hi, firstly I have to say that I really liked the idea behind this project. 👍

The problem is that I'm using the "Privacy Badger" chrome extension to block tracking networks, and seems like it also blocks images.unsplash.com, which I'll manually whitelist after submitting this issue.

I noticed that if I "refresh & use <img />", alt texts are properly displayed in place of the unloaded images. But if I "refresh & use <img-2>", alt texts are gone. I didn't inspect the source code much and not sure if this is only a demo problem. Just wanted to inform you about this situation.

What I expected: seeing alt text if img-2 fails loading the image for any reason.

I'm seeing this in the console:

image

Nevraeka commented 6 years ago

AMP image uses a <div fallback>alt text goes here</div> for the image alt (in addition to alt). Maybe that approach might work?

RevillWeb commented 6 years ago

Thank you for submitting this issue @scriptype. This is happening simply because it doesn't render the <img /> element inside the web component if it cannot successfully load the image, therefore it won't display the alt text 😞. As @Nevraeka suggests I should provide some kind of fallback to ensure the alt text gets displayed when an image doesn't load. I'll look into it 👍