找不到源图像时如何隐藏“找不到图像”图标？

JavaScript和jQuery可用于在未找到图像时隐藏“未找到图像”图标。基本思想是在出现错误时将图像对象的显示属性设置为“隐藏” 。让我们考虑以下显示 GeeksforGeeks 徽标的 HTML 代码以进行演示。
示例：在本示例中，我们不会隐藏找不到图像的图标。

输出：

• 当图像可用时：

• 找不到图片时：

隐藏图像错误图标的方法：

• 使用 onerror() 事件：当相应的项引发错误时，会自动调用 onerror 事件。当未找到图像时，onerror 事件同时调用 hideImg()函数，该函数会将图像的可见性设置为隐藏。
  程序：

html

    
    
    
        
            Example to hide the 'Image Not Found' icon i.e.
            
        
        
        
      function hideImg() {
        document.getElementById("HideImg")
                          .style.display = "none";
       }
        
    

• 使用速记法：您可以将此速记法应用于 HTML 事件。这会将参考对象的可见性设置为隐藏。
  程序：

html

    
    
    
        

            Example to hide the 'Image Not Found' icon i.e.
            
        
        
    
   

• 使用 jQuery：使用JQuery错误处理函数error() ，我们可以捕获错误并使用hide()函数隐藏对象。
  注意： error()函数已从 jquery 3.0 版中删除。然后。
  程序：

html

    
        
       
    
    
        
            Example to hide the 'Image Not Found' icon i.e.
            
        
        
    


    $(document).ready(function () {
        $("#HideImg").error(function () {
            $(this).hide();
        });
    });

输出：以上所有代码都给出相同的输出。