【问题标题】:alt attribute for Image tag in htmlhtml中图像标签的alt属性
【发布时间】:2013-03-27 12:48:02
【问题描述】:

场景:

 <img src="filepath" alt="image not found">

这将确保如果在路径中找不到文件,则将加载文本.....

问题: 可以加载图像而不是替代文本吗?是否有任何标签可以满足我的目的?是否有任何自定义的 JavaScript 函数可以在#alt 标签中给出??

【问题讨论】:

  • 无法加载图像。 (您有什么保证可以找到并加载 那个 图像?然后您想为 alt 图像设置一个 alt 图像吗?等等)
  • 请注意alt 属性基本上是一个辅助功能。在无法显示图像的环境中(例如屏幕阅读器),另一个图像不足以替代。我建议您将该属性用于预期目的(如果适用,请提供图片的简短描述,“未找到图片”不是)并找到另一种方法来检测丢失的图片。

标签: javascript html image alt


【解决方案1】:

您可以检查图像是否在 JavaScript 中加载:

var img = document.getElementById('image');
if ( img.complete && img.naturalWidth == 0 ) {
  // some error, load alternate image:
  img.src = "path to alternative img";
}

编辑:完整的解决方案(使用@JoDev 的回答中的onerror)将是:

<script>
function validate (img) {
  // Clear the callback to avoid infinite loop in case
  // new image path would be also invalid.
  img.onerror = null;

  if ( img.complete && img.naturalWidth == 0 ) {
    // some error, load alternate image:
    img.src = "http://example.com/valid_path.png";
  }
}
</script>

<img onerror="javascript:validate(this);" 
     src="http://example.com/some_invalid_path.png"/>

【讨论】:

    【解决方案2】:

    有一个特殊的活动可以让你做到这一点。它是:

    <img src="" onerror="this.src='path/to/default'" />
    

    【讨论】:

    • ' 这可以用吗..如果可以的话如何在内部html中使用它??
    【解决方案3】:

    请参考下面的代码..

    在 onerror 函数中添加你想要加载的 src 路径。如果 src 是加载图片。

    <img onerror="this.onerror=null;this.src='http://www.personal.psu.edu/oeo5025/jpg.jpg'" id="ddd" 
    src='http://www.loveimagesdownload.com/wp-content/uploads/2016/08/declaration-of-love_23-2147517078.jpg'/>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2021-08-05
      • 1970-01-01
      • 1970-01-01
      • 2012-07-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多