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

Posted 2023-03-05

【中文标题】html img 隐藏损坏的图标，显示 alt

【英文标题】：html img hide broken icon, show 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"    />
            <span class="alt"></span>

【讨论】：

@FanLee，我已经用jQuery 做了，希望对你有帮助

@FanLee ，您可以看到答案***.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 );

<img src="actual_image_src"  alt="helloworld" onerror="doSomething(this)" />

【参考方案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'"/>