"对于动态生成的img src,元素img上的属性src的值为:必须为非空"

Question

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

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

我在做什么是滑动功能我改src到data-src使用jQuery的动画.滑块效果很好.我的问题是当我尝试在w3c验证工具中验证它时,它会出现以下错误:

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

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

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

无论如何在没有改变JavaScript或CSS的情况下解决这个问题？如果我这样离开,这件事可能会产生什么后果？

Answer 1

将image 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

Answer 2

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