0

On my website I have empty image frames like this when the load resource fails because it doesn't exist:

enter image description here

This is an example image tag:

<img class="thumbnail" src="{{event.venue.icon}}" id="thumbnail">

How can I simply remove these empty frames?

Reinstate Monica Cellio
  • 25,975
  • 6
  • 51
  • 67
Sid Jones
  • 55
  • 1
  • 1
  • 10
  • How do you show the image? With an tag? – endamaco Dec 12 '17 at 11:55
  • Use onload javascript event handler for every image and if you get status error hide that image – Deepak Kumar T P Dec 12 '17 at 11:57
  • This might help: https://stackoverflow.com/questions/980855/inputting-a-default-image-in-case-the-src-attribute-of-an-html-img-is-not-vali – Michael Zelensky Dec 12 '17 at 11:58
  • That looks like angular is binding the image source to a "not-found" image. The origin of the value `event.venue.icon` is where you need to look. – Reinstate Monica Cellio Dec 12 '17 at 12:34
  • Well the thing is I also have which looks at a different source (an external api), and so basically this error is arising because I have mapped the icons differently to the objects. I just want a quick way on the frontend of removing the empty boxes. – Sid Jones Dec 12 '17 at 12:39
  • I understand that, but if you do a "view source" you'll see the images have src attributes for valid images that exist, so trapping errors is out of the question. At some point the image source is being replaced and that is where you must fix your issue. You could, of course, hide all images with the image source that's used for missing images. – Reinstate Monica Cellio Dec 12 '17 at 13:09
  • The code in the HTML is an ng-repeat event in events, where events is a concentration of remote events and local events. The remote events share the same properties title, desc, date, etc... but differ in this one property slightly, as the remote events require icon.url to get the icon, whereas the local ones require venue.icon. As you can see i've just done an ng-repeat on both which is causing these boxes as the remote ones don't have venue.icon and the local ones don't have icon.url. – Sid Jones Dec 12 '17 at 13:27

3 Answers3

1

Check out onerror event, when image is loaded hide it if loading fails: 

<img src="someimage.jpg" onerror="this.style.display='none';" />
Mosè Raguzzini
  • 15,399
  • 1
  • 31
  • 43
1

Bind to the error event for the images and from within that method you can remove the containers for any images that fail to load. Here is an example, but post your code if you want something more specific:

$('.yourImageSelector').error(function() {
    $(this).parent().remove();
});
delinear
  • 2,745
  • 1
  • 10
  • 21
-1

Bind error event on img tag like this,

$(document).ready(function(){
  $('#myImg').on("error", function() {
    $(this).remove();  // Execute with commenting this line and see the result
    console.log(document.querySelector('img'));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="myImg" src="compman.gif" alt="Computerman" width="107" height="98">

Comment $(this).remove(); and execute, you will get the "Computerman" as the text alternative specified by alt attribute also the img element in the console as result.

Madhavan.V
  • 825
  • 1
  • 6
  • 14