How to hide broken images in Angular app

Question

I've built an Angular app that utilizes the Instagram API to pull in images. If a user later deletes an image I end up with broken images (404's). I've attempted to use jQuery to hide the div containing these (broken) images, but they still appear.

I've placed the following jQuery in a 'custom.js' file that I reference in my 'index.html' file:

$(document).ready(function() {
    $("img").error(function() {
        $(this).parent().hide();
    });
});

I reference jQuery then 'custom.js' in the head of 'index.html' as follows:

<script src="libs/jquery/dist/jquery.min.js"></script>
<script src="js/custom.js"></script>

...and here is the html I'm attempting to apply this jQuery to:

<a ng-href="{{image.link}}" target="_blank" title="{{image.text}}"><img ng-src="{{image.img}}" alt="" class="img-responsive" ng-style="homeColors" id="image"></a>

@cychoi, removing would be an option, too. The problem is that the jQuery above isn't currently working at all, and I can't figure out why. — MattDionis, Nov 10 '14 at 15:47
The code you provided works. Check here: http://jsfiddle.net/fqxw0dqg/ — cychoi, Nov 12 '14 at 17:03
@cychoi, interesting. I wonder if the fact that my images sit inside an `ng-repeat` causes the jQuery to not work. — MattDionis, Nov 12 '14 at 20:03
Not sure. I've never been using angularJS, so I can't speak for that. If you can provide more code on that in your question, people here might help. — cychoi, Nov 13 '14 at 12:30
Okay. I updated the fiddle using `ng-repeat` and, unfortunately, it still works. http://jsfiddle.net/fqxw0dqg/3/ — cychoi, Nov 13 '14 at 12:53

score 4 · Accepted Answer · answered Jan 09 '15 at 18:15

I ended up using the following Javascript to hide my images. The first function hides the grandparent of my image so that the entire div is hidden. The second function replaces missing user profile images with Instagram's anonymous user image:

function imgError(image){
  image.parentNode.parentNode.style.display = 'none';
}
function anonImg(image){
  image.src = 'https://instagramimages-a.akamaihd.net/profiles/anonymousUser.jpg';
}

Just add the following HTML to the respective images:

onerror="imgError(this);"
onerror="anonImg(this);"

I thought this would be the way to go too. Problem I run into, an error with any image causes all to hide -- I'm actually responding to onerror="this.style.display='none'" — Dave Alperovich, Jan 20 '18 at 01:54

score 0 · Answer 2 · edited May 23 '17 at 12:00

0

Try removing src attribute from broken images instead, but i think this still may not work, because angular could bring this attribute back.

If this won't work, please try this: https://stackoverflow.com/a/17122325/4229156

edited May 23 '17 at 12:00

Community

1
1

answered Nov 08 '14 at 02:54

Jacek Zyśk

134
4

6

The "best" option I've found so far is to use this HTML tag: `onerror="this.style.display='none'"` The problem is, this only hides the image. I need to hide the containing div. – MattDionis Nov 10 '14 at 15:52

How to hide broken images in Angular app

2 Answers2