“Bad value for attribute src on element img: Must be non-empty”, for dynamically generated img src

问题

I have a web site with an image slider. I keep the some of the image tags empty as the images load on when slide comes into view for faster page load. The image tags defined as follows:

<img data-src="img/portfolio-desktop1-small.png" src="" alt=""/>

What I'm doing is on slide function I change the src to data-src with jQuery animation. The slider works great. My problem is when I try to validate it in w3c validation tool it gives the following error:

Line 131, Column 179: Bad value for attribute src on element img: Must be non-empty.

...data-src="img/portfolio-desktop1-small.jpg" src="" alt=""/>

Syntax of URL:
Any URL. For example: /hello, #canvas, or http://example.org/. > Characters should be represented in NFC and spaces should be escaped as %20.

Is there anyway to fix this without altering the JavaScript or CSS? If I leave it like this what can be the possible harmful outcomes of this matter?

回答1:

What happens if you just remove the src attribute then add it on the fly when you need it. The src attribute isn't required. And in my opinion I wouldn't worry about what the w3c validation tool says anyway. As long as you test it in the necessary browsers and it works.

回答2:

Set the image src attribute to #:

<img data-src="img/portfolio-desktop1-small.png" src="#" alt="Thumbnail">

The HTML passes the W3C validator just fine, and modern browsers know not to try to load the non-existent image.*

For contrast, using a src value that references a non-existent file results in an unnecessary HTTP request and an error:

<img data-src="img/portfolio-desktop1-small.png" src="bogus.png" alt="Thumbnail">

Failed to load resource: The requested URL was not found on this server.

*Note: I've read conflicting information on how browsers handle the #. If anyone has definitive information, please add a comment.

Also see related answer by sideshowbarker about the action attribute:
https://stackoverflow.com/a/32491636

来源：https://stackoverflow.com/questions/30658663/bad-value-for-attribute-src-on-element-img-must-be-non-empty-for-dynamically