CODEWITHSUNDEEP
javascripthtmlcssangularjssrc
Laurenswuyts
Laurenswuyts

Reputation: 2142

Hide image on 404 code, still shows broken image for few ms

This is my code:

<img ng-show="json.user.picture" ng-src="{{json.user.picture}}" ng-error="json.user.picture = false">

When the you dont have the permission to use the image from an external website you get a 404 code and when that happens I don't want to show the image. I'm doing that with the code above and it works but it still shows the broken image for a few ms how can you get rid of that?

Between ng-show en ng-hide there is a small delay which shows the broken image, how to get rid of that?

Upvotes: 1

Views: 528

Answers (1)

Tintu C Raju
Tintu C Raju

Reputation: 2700

I think the problem is; you are using json.user.picture as the condition to show image as well as the source of the image. so if ng-error triggers it will change json.user.picture to false so the image source become false and it tries to load the image with name false like <img src='false'> which will again throw an error.

So you have to use an extra variable like showImage which will be true by default. on error change this to false and use it in ng-show

so it will be like

<img ng-show="showImage" ng-src="{{json.user.picture}}" ng-error="showImage = false">

Upvotes: 1

Related Questions