“元素 img 上属性 src 的错误值：必须为非空”，对于动态生成的 img src

Question

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?

Answer 1

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

Update: December 2019

It seems the src="#" trick used to be a decent workaround but not anymore. What I do now is create a Gulp build task to post-process src="#" to use an inline data URL of a tiny invisible one pixel SVG.

The essential gulpfile.js bits look like:

const onePixelSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="1" height="1"></svg>';
const placeholderSvg = `"data:image/svg+xml;base64,${Buffer.from(onePixelSvg).toString('base64')}"`;

const task = {
   buildHtml() {
      return gulp.src('src/html/**/*.html')
         .pipe(replace('src="#"', 'src=' + placeholderSvg))
         .pipe(gulp.dest('build'));
      }
   };
gulp.task('build-html', task.buildHtml);

The advantage of using a build task is that 1) the source remains uncluttered, 2) the HTML always validates, and 3) the inline data URL prevents the browser from making an unnecessary and invalid network request.

Answer 2

2021年1 月更新。 src="#" 技巧现在适用于https://www.w3.org/TR/html-media-capture/的验证器

Answer 3

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.

Answer 4

If anyone still looking for the answer, the src="/" code resolves the w3c validator complains and doesn't produce additional request like the solution with the # character.