"Bad value for attribute src on element img: Must be non-empty", for dynamically generated 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?

Protective

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

Scold

Removing src gave me the a different error which is: >Line 131, Column 172: Element img is missing required attribute src. though I guess I have to agree with you that at the moment w3c validation is not good enough to worry right now. – Protective

Sounds like the validation tool is just a fickle bitch. I'd say just cross browser test it to ensure nothing is broken and call it a day. – Scold

The src attribute is required. – Nighthawk

@Nighthawk technically yes but on browsers I care about it doesn't break. – Scold

Answer 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

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.com/center-key/img-src-placeholder (MIT License)

The interesting bits are:

const onePixelSvg =
   '<svg xmlns="http://www.w3.org/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

Katzen

I've just tried this in Chrome, and loads the current URL (html) again for each image with src="#", so that won't work for me. – Bergeron

@Bergeron Can you look in the console and verify that the 404 error you're seeing has a # in the URL just to make sure it's not another image resource that's having trouble loading (it's working ok for me with Chrome v55.0.2883.95 on macOS 10.12.2). – Katzen

I'm not seeing a 404. I'm seeing the base href (document URL) being fetched again for every image (or at least once). – Bergeron

Answer 3

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

Gawk

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.

Factorage