使用 jQuery 动态地将缺失的 alt 应用于图像，在 w3c 验证中显示类似 "image must have an alt attribute" 的错误

Question

我在使用以下代码进行 w3c 验证时遇到错误。

<div class="media">
  <div class="pull-left">
    <img class="img-responsive" src="http://10.70.2.81/resource/images/Trustworthy-Guidance.png" >
  </div>
  <div class="media-body">
    <h4 class="media-heading text-align-left">Trustworthy Guidance</h4>
    <p class="text-align-left font-family-light">With up-to-date knowledge of various technology platforms and programming languages, we have the expertise to guide you to the right software solution for your business.</p>
  </div>
</div>

我添加了以下代码，用于使用 jQuery 将缺失的 alt 动态应用到图像：

$(document).ready(function() {
    $('img').each(function() {
        var $img = $(this);
        var filename = $img.attr('src').replace(new RegExp("-", "g"), ' ');
        var filename1 = filename.substring(filename.lastIndexOf('/')+1);    
        var attr = $(this).attr('alt');
        var title = $(this).attr('title');    

        if (typeof attr == typeof undefined || attr == false) {
            $img.attr('alt', filename1.substring(0, filename1.indexOf('.')));
        }
    });
});

甚至我在 w3c 验证中遇到了与 image must have an alt attribute 相同的错误。如何使用 jQuery 避免该错误，否则我需要在所有页面中手动编辑。

Answer 1

您不能将带有 JavaScript 的图像 alt 属性（和其他任何东西）设置到您的文档中，以成为有效的 HTML输出！

w3c 验证、机器人或爬虫等服务不会执行 JavaScript 代码。因此，根据您页面的要求，您的 HTML 完全错误并且缺少这些信息。浏览器可能会执行您的 JavaScript 代码并将正确的信息添加到 DOM 元素。对于使用普通浏览器的用户来说，一切似乎都很好，但对于任何自动化系统来说，就不是这样了。

因此，在页面自行加载后使用 JavaScript 动态执行此类操作通常不是一个好主意，因为那时搜索引擎无法正确收集数据。图像 alt 是搜索引擎的重要属性，它们无法在您的示例中读取此信息。

如果您想拥有一个对 SEO 最友好的页面，您真的应该按要求提供正确的 HTML，而不是事后操纵内容！

使用 jQuery 动态地将缺失的 alt 应用于图像，在 w3c 验证中显示类似 "image must have an alt attribute" 的错误

Dynamically applying missing alt to the image using jQuery showing error like "image must have an alt attribute" in w3c validation

html

jquery

w3c-validation