Home / Questions / 240003
Accepted
Iván Rodríguez
Asked: 2020-02-22 13:55:13 +0800 CST 2020-02-22 13:55:13 +0800 CST

如何从 img 元素中删除默认图标？（图片未找到）

  • 772

我想防止在元素中找不到图像时出现默认图标< img >。alt属性的文本对我来说并不重要，但如果我也能阻止它更好地出现的话。

这是我的元素（src 属性是动态设置的）：

<img id="img_id" alt="0">

这就是没有图像和有图像的样子

在此处输入图像描述

有人知道该怎么做吗？

javascript

3 Answers

  1. Best Answer

    想象你有多个图像和一个类。可以使用带有 jQ​​uery 的事件来隐藏它们error：

    <img class="image" src="http://orig14.deviantart.net/61ac/f/2011/271/9/7/goku_icon_by_pinkpanda191-d4b8dhe.jpg">
<img class="image" src="nada">
<img class="image" src="http://orig02.deviantart.net/1e49/f/2011/344/9/c/goku_icon_by_cyberchimchar-d4iomxv.png">

    如您所见，第二张图片来自无效来源。现在注意我如何使用事件隐藏它error：

    var images = $(".image");

$(images).on("error", function(event) {
    $(event.target).css("display", "none");
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img class="image" src="http://orig14.deviantart.net/61ac/f/2011/271/9/7/goku_icon_by_pinkpanda191-d4b8dhe.jpg">
<img class="image" src="nada">
<img class="image" src="http://orig02.deviantart.net/1e49/f/2011/344/9/c/goku_icon_by_cyberchimchar-d4iomxv.png">

    或者，也许您更喜欢用占位符替换图像以保持结构：

    var images = $(".image");

$(images).on("error", function(event) {
    $(event.target).attr("src", "https://image-placeholder.com/images/actual-size/200x200.png");
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img class="image" src="http://orig14.deviantart.net/61ac/f/2011/271/9/7/goku_icon_by_pinkpanda191-d4b8dhe.jpg">
<img class="image" src="nada">
<img class="image" src="http://orig02.deviantart.net/1e49/f/2011/344/9/c/goku_icon_by_cyberchimchar-d4iomxv.png">

    我使用的是内联占位符，但您可以将其更改为您认为必要的任何图像。

    • 5

  2. 你可以试试onerror

    <img
   src="no_encuentra"
   onerror="this.onerror=null; 
   this.src='https://i.ebayimg.com/images/g/AFoAAOSw5e5cbgL6/s-l400.jpg';"
/>
    • 3

  3. 你好，你可以使用这样的东西：

    <h4>CON IMAGEN</h4>
<img src="https://www.elcomercio.com/files/article_main/uploads/2017/03/17/58cca4a396a07.jpeg" alt="ambato"><br>
<h4>SIN IMAGEN</h4>
<img src="broken" onerror="this.style.display='none'" alt="error">

    有关 onerror 的更多详细信息，我建议您查看以下内容： OnError

    • 3