search

aFarkas / lazysizes

High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.
MIT License
17.56k stars 1.73k forks source link

Error: Element img is missing required attribute src. #992

Open IrynaShcharbakova opened 1 year ago

IrynaShcharbakova commented 1 year ago

Describe your problem/question When I go to https://validator.w3.org/ to validate HTML of my website, I get an Error: Element img is missing required attribute src.

You can check your demo page http://afarkas.github.io/lazysizes/#examples and see that error. It is true when I replace img by data-src, it affects the HTML structure. The browser does not see image anymore. Or am I wrong? Anyway could you please help to get rid of this error?

Thank you P.S. I have searched but I did not find that issue in the history.

Add tags/keywords img, error, HTML error, attribute

⚠️ Search for existing open/closed issues/discussions before you ask your question. ⚠️ I work on my spare time on helping users out. This means make it easy for me to simply see your live problem and help to fix it. 🤘 No panic: Don't be afraid to ask a question.

RawMajkel commented 1 year ago

Try adding src="#".

<img src="#" data-src="/path/to/image" class="lazyload">

saas786 commented 10 months ago

@IrynaShcharbakova

Read: https://github.com/aFarkas/lazysizes?tab=readme-ov-file#broken-image-symbol

You could consider doing something similar to...

<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/path/to/image" class="lazyload">