html img 隐藏损坏的图标，显示 alt答案

【问题标题】：html img hide broken icon, show althtml img 隐藏损坏的图标，显示 alt
【发布时间】：2018-09-25 16:30:33
【问题描述】：

您知道如何隐藏经典的“找不到图像”或损坏的图标，但是当找不到图像文件时，呈现的 HTML 页面中仍然存在 alt？像这样， <img id="testImg" src="#" alt="No Image"/>：

更改为：无图像（仅显示 alt）

任何使用 JavaScript/jQuery/CSS 的工作方法？谢谢

【问题讨论】：

How to silently hide "Image not found" icon when src source image is not found的可能重复

【解决方案1】：

     $(function(){
          $('img').error(function(){
            $(this).css('opacity' ,0);
            $(this).next('.alt').text($(this).attr("alt"));
          });
      })

        .alt {
          opacity:0;
          float: left;
        }

        .alt:hover {
          opacity:1;
        }

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

            <img src="image_src"  alt="helloworld"  />
            <span class="alt"></span>

【讨论】：

@FanLee，我已经用jQuery 做了，希望对你有帮助
@FanLee ，您可以看到答案stackoverflow.com/a/48006339/5940860 我认为用另一个背景img替换它也是个好主意

【解决方案2】：

你可以试试这个

基于alt文本创建一个文本节点元素
在img之前插入文本节点
删除img，或者根据需要隐藏它

function doSomething(elem){
  var alt = document.createTextNode( elem.getAttribute('alt') );
  
  elem.parentNode.insertBefore( alt, elem );
  
  elem.parentNode.removeChild( elem );
}

&lt;img src="actual_image_src"  alt="helloworld" onerror="doSomething(this)" /&gt;

【讨论】：

【解决方案3】：

您可以使用以下代码解决此问题：

<img src="actual_image_src" onerror="this.src='on_error_image_src'"/>

如果你不想，你也可以使用display:none css 显示任何东西。

<img src="actual_image_src" onerror="this.style.display='none'"/>

【讨论】：