如果缺少图像文件名，如何使用 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

文件名是否始终提供有意义的slug？ 如果没有，你最好只有空的alt标签。 Web爬虫已经获取了图像文件名，因此添加最后一位只有在它实际描述图像时才有用。 （它也不是100％真实，它不会通过JS索引，一些机器人，特别是谷歌，在某种程度上解析JavaScript。）

如果文件名不具有描述性，那么它可能会弊大于利（对SEO和屏幕阅读器而言）。 如果您计划使用此方案，我假设您要么或将要提供描述性文件名。

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

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

替代文本有几个功能：

• 它由屏幕阅读器代替图像读取，允许具有视觉或某些认知障碍的人可以访问图像的内容和功能。
• 如果未加载图像文件或用户选择不查看图像，则在浏览器中显示该图像。
• 它为图像提供语义含义和描述，可以由搜索引擎读取，或者用于稍后仅从页面上下文确定图像的内容。

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

Answer 2

您没有指定输出html内容的方式，更具体地说是图像标记。

但我猜，根据你的问题，你有一个带有很多img标签的html文件，并且你想要添加一个alt属性，而不需要手工操作。

如果是这种情况，那么可以采用PHP解析HTML文件，并将结果保存到包含所需alt标签的所有img标签的新HTML文件中。

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

然后使用preg_replace（）解析检索到的内容，以检测缺少alt属性的img标记，并添加它们。

最后将带有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 3

这将完成它

jQuery(document).ready(function () {
  jQuery("img").each(function () {
    var img_src = jQuery(this).attr('src');
    if (typeof img_src !== typeof undefined && img_src !== false) {
      var img_alt = jQuery(this).attr('alt');
      var str = img_src
      var pieces = str.split('/');
      var imgName = pieces[pieces.length - 1];
      var imgnameArray = imgName.split('.');
      var alt = imgnameArray[0];
      if (img_alt == '' || typeof img_alt === typeof undefined || img_alt === false) {
        jQuery(this).attr('alt', alt);
      }
    }
  });
});