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 es 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 /. > 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 outes of this matter?

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 es 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/. > 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 outes of this matter?

• javascript
• jquery
• html
• image
• w3c-validation

4 Answers 4

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 ment.

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

Update: November 2022

It seems the src="#" trick used to be a decent workaround but it's no longer a good idea to send that to the browser.  So, I created a build tool to convert occurrences of src="#" in source HTML to inline data URLs of a tiny invisible one pixel SVG appropriate for the browser.

Build tool img-src-placeholder:
https://github./center-key/img-src-placeholder (MIT License)

The interesting bits are:

const onePixelSvg =
   '<svg xmlns="http://www.w3/2000/svg" width="1" height="1"></svg>';
const dataImage = 'data:image/svg+xml;base64,' +
   Buffer.from(onePixelSvg).toString('base64');
html.replace(/src=["']?#["']?/gm, `src="${dataImage}"`);

The resulting HTML will have <img> tags like:

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxIiBoZWlnaHQ9IjEiPjwvc3ZnPg=="
   alt=avatar>

The advantage of using a build tool is that:

1. Source remains uncluttered
2. HTML always validates
3. The inline data URL prevents the browser from making an unnecessary and invalid network request

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.

Update Jan 2021. The src="#" trick works now on the validator at https://www.w3/TR/html-media-capture/

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