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

How to remove the default icon from an img element? (image not found)

  • 772

I would like to prevent the default icon from appearing when an image is not found in an element < img >. The text of the alt property does not matter to me as much but if I can also prevent it from coming out much better.

This is my element (the src property is set dynamically):

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

And this is how it looks without images and with images

enter image description here

Would anyone know how to do this?

javascript

3 Answers

  1. Best Answer

    Imagining you have multiple images with a class. It is possible to hide them using the event errorwith jQuery:

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

    As you can see, the second image comes from an invalid source. Now notice how I hide it using the event 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">

    Or maybe you prefer to replace the image with a placeholder to keep the structure:

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

    I'm using an inline placeholder, but you can change it to whatever image you deem necessary.

    • 5

  2. you can try withonerror

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

  3. Hello, you could use something like this:

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

    For more details of the onerror I suggest you review this: OnError

    • 3