如果缺少图像文件名，如何使用 php 自动添加图像“alt”属性？

Question

我需要为数百张图片添加图片 alt 标签。问题是这将花费很长时间，无论如何似乎有一个更简单的解决方案。

我已经能够在某种程度上使用 javascript 来实现这一点，如下所示：

<script type='text/javascript'>  
 //<![CDATA[  
 $(document).ready(function() {  
  $('img').each(function(){  
   var $img = $(this);  
   var filename = $img.attr('src')  
    if (typeof attr == typeof undefined || attr == false) {
        $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
    }  
  });  
 });  
 //]]>  
</script>

这正是我想要的，例如，如果我有这张图片：

<img src="http://mywebsite.com/images/the-image1.jpg" />

然后javascript会像这样自动添加alt：

<img src="http://mywebsite.com/images/the-image1.jpg" alt="the-image1" />

好吧，这一切都很好，但现在我想用 PHP 来代替，因为问题是这只是将标签添加到前端，这意味着它在页面源中不可见（仅检查元素），这意味着搜索引擎不会看到 alt 标签，这意味着唯一的方法是使用 php 将其直接放入页面中。

那么我该如何使用 php 完成上述 javascript 解决方案？

Answer 1

您没有指定如何输出 html 内容，更具体地说是图像标签。

但我猜，根据您的问题，您有一个包含很多 img 标记的 html 文件，并且您想在缺少的地方添加一个 alt 属性，而无需手动操作.

如果是这种情况，最好的方法是使用 PHP 解析您的 HTML 文件，并将结果保存到一个新的 HTML 文件中，其中所有 img 标记都包含所需的 alt 标记。

您可以使用PHP方法file_get_contents()读取HTML文件内容。

然后用preg_replace()解析检索到的内容，检测出img标签缺少alt属性，并添加。

最后用file_put_contents() 将解析后的内容保存回一个 HTML 文件，供以后使用。

PHP 实现可以是：

// Retrieve the HTML content to be parsed
$html = file_get_contents( "path_to_html_file" );

// This regexp select all img tags not already containing an alt attribute
$pattern = '#<img(?!.*alt=")(.+src="(([^"]+/)?(.+)\..+)"[^ /]*)( ?\/?)>#i';

// Add alt attribute to img tags lacking it
// put the filename without extension as a value to the alt attribute
$parsed_html = preg_replace( $pattern, '<img$1 alt="$4"$5>', $html );

// Save the parsed content to a new file
file_put_contents( "path_to_parsed_html_file", $parsed_html );

Answer 2

文件名是否始终提供有意义的 slug？如果没有，最好只使用空的 alt 标签。网络爬虫已经在获取图像文件名，所以添加最后一位只有在它实际上是对图像的描述时才会有所帮助。 （这也不是 100% 正确，它不会通过 JS 被索引，一些机器人，尤其是谷歌，会在某种程度上解析 JavaScript。）

如果文件名不是描述性的，它可能弊大于利（对于 SEO 和屏幕阅读器）。如果您打算继续使用此方案，我假设您正在或将提供描述性文件名。

我假设图像没有以某种方式进行内容管理，您可以从 alt（和/或 longdesc）属性的标题或描述中提取？

如果它是一次性修复，同样取决于命名的质量，它可能没问题。几百张图片可能不会花那么长时间，而且总会有 [广告已删除] :)

替代文字有多种作用：

• 通过屏幕读取 读者代替图像允许的内容和功能 具有视觉或某些认知能力的人可以访问的图像 残疾。
• 如果 图像文件未加载或用户选择不查看时 图片。
• 它为图像提供语义含义和描述 可以被搜索引擎读取或用于以后确定 图片内容仅来自页面上下文。

http://webaim.org/techniques/alttext/