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

Question

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

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

我正在做的是在幻灯片功能上，我将 src 更改为 data-src 并使用 jQuery 动画。滑块效果很好。我的问题是当我尝试在 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 属性，然后在需要时即时添加它，会发生什么情况。不需要 src 属性。在我看来，无论如何我都不会担心 w3c 验证工具所说的内容。只要你在必要的浏览器中测试它就可以了。

Answer 2

将图像 src 属性设置为 #:

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

HTML 很好地通过了 W3C 验证器，现代浏览器知道不要尝试加载 non-existent 图像。*

相比之下，使用引用 non-existent 文件的 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 属性的相关回答：

更新：2019 年 12 月

似乎 src="#" 技巧曾经是一个不错的解决方法，但现在不是了。我现在要做的是为 post-process src="#" 创建一个 Gulp 构建任务，以使用一个微小的不可见的单像素 SVG 的内联 data URL。

基本的 gulpfile.js 位看起来像：

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);

使用构建任务的优点是 1) 源保持整洁，2) HTML 始终验证，以及 3) 内联数据 URL 防止浏览器进行不必要的和无效的网络请求。

Answer 3

2021 年 1 月更新。 src="#" 技巧现在可以在 https://www.w3.org/TR/html-media-capture/

的验证器上使用

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

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

javascript

jquery

html

image

w3c-validation

更新：2019 年 12 月