html img hide broken icon，show alt

Question

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

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

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

Answer 1

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

<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'"/>

Answer 2

     $(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>

Answer 3

你可以试试这个

1. 根据 Example data: QueenRowColumn: (3,3) TheComparisonQueen: (7,3) def CheckQueenPathDown(self, QueenRowColumn, TheComparisonQueen): row = [] column = [] CurrentLocation = QueenRowColumn #MoveLocation = TheComparisonQueen a = QueenRowColumn[0] b = QueenRowColumn[1] for i in range (-10,0): row.append(CurrentLocation[1] - i) column.append(a) Down = zip(row,column) #Down.remove(TheComparisonQueen) return Down 文字
创建文本节点元素
2. 在alt
之前插入文本节点
3. 删除img，或在需要时将其隐藏

img

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