元素img上的src属性值不正确:对于动态生成的img src，必须是非空的

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

本文关键字：src img 是非 动态 属性 上的 不正确 元素 于动态      更新时间：2023-09-26

我有一个带有图像滑块的网站。当幻灯片进入视图时，我将一些图像标签保留为空，以便更快地加载页面。图像标签定义如下:

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

我所做的是在幻灯片功能上，我用jQuery动画将src更改为data-src。滑块很好用。我的问题是，当我试图验证它在w3c验证工具，它给出了以下错误:

第131行，第179列:元素img上属性src的值不正确:必须为非空

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

URL语法:
任何URL。例如:/hello、#canvas、http://example.org/。>字符应该用NFC表示，空格应该转义为%20。

有没有办法在不改变JavaScript或CSS的情况下解决这个问题?如果我就这样离开，这件事可能会有什么有害的后果呢?

设置图像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">

加载资源失败:请求的URL在此服务器上找不到。

*注:我读过关于浏览器如何处理#的冲突信息。如果有人有明确的信息，请添加评论。

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

更新: 2022年11月

似乎src="#"技巧曾经是一个体面的解决方案，但它不再是一个好主意，将其发送到浏览器。因此，我创建了一个构建工具，将源HTML中出现的src="#"转换为适合浏览器的不可见的1像素SVG的内联数据url。

构建工具img-src-placeholder:
https://github.com/center-key/img-src-placeholder (MIT许可)

有趣的部分是:

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防止浏览器产生不必要和无效的网络请求

如果您只是删除src属性，然后在需要时动态添加它会发生什么?src属性不是必需的。在我看来，我不会担心w3c验证工具说什么。只要你在必要的浏览器中测试它，它就可以工作。

2021年1月更新 src="#"这个把戏现在在https://www.w3.org/TR/html-media-capture/

的验证器上起作用了

如果有人还在寻找答案，src="/"代码解决了w3c验证器投诉，并且不会产生像#字符解决方案那样的额外请求。

相关文章：