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>

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>

• javascript
• jquery
• html
• angularjs

• Why not remove it? You don't need to show it again. – cychoi Commented Nov 8, 2014 at 5:19
• @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 Commented Nov 10, 2014 at 15:47
• The code you provided works. Check here: jsfiddle/fqxw0dqg – cychoi Commented Nov 12, 2014 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 Commented Nov 12, 2014 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 Commented Nov 13, 2014 at 12:30

2 Answers 2

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/profiles/anonymousUser.jpg';
}

Just add the following HTML to the respective images:

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

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./a/17122325/4229156