javascript - "Bad value for attribute src on element img: Must be non-empty", 用于动态生成的 img src

Question

我有一个带有图像 slider 的网站。当幻灯片进入 View 以加快页面加载速度时，我将一些图像标签留空，因为图像会加载。图片标签定义如下:

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

我正在做的是在幻灯片功能上，我使用 jQuery 动画将 src 更改为 data-src。 slider 效果很好。我的问题是当我尝试在 w3c validation tool 中验证它时它给出了以下错误:

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.

有没有办法在不改变 JavaScript 或 CSS 的情况下解决这个问题？如果我就这样放任不管，这件事可能造成的有害后果是什么？

Answer 1

设置图片src属性为 # :

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

HTML 顺利通过了 W3C 验证器，现代浏览器知道不要尝试加载不存在的图像。*

相比之下，使用 src引用不存在文件的值会导致不必要的 HTTP 请求和错误:

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

*注意:我读过有关浏览器如何处理 # 的相互矛盾的信息.如果有人有确切的信息，请添加评论。

另请参阅 sideshowbarker 关于 action 的相关回答属性:
https://stackoverflow.com/a/32491636

更新:2022 年 11 月

似乎src="#" trick 曾经是一个不错的解决方法，但将其发送到浏览器不再是一个好主意。因此，我创建了一个构建工具来转换出现的 src="#"。在源 HTML 中内联 data URLs适合浏览器的微小、不可见的一像素 SVG。

构建工具 img-src-placeholder :
https://github.com/center-key/img-src-placeholder (麻省理工学院许可证)

有趣的部分是:

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}"`);

生成的 HTML 将具有 <img>标签如:

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

使用构建工具的优势在于:

1. 来源保持整洁
2. HTML 始终有效
3. 内联数据 URL 可防止浏览器发出不必要且无效的网络请求