AngularJS can produce a 404 error when using variable for image

Question

<img lass="img-circle" src="{{p.CharmType | enumCharmUrl}}">

When having an image above in angular i get an error thrown if there is a brief moment when that variable is not available and it throws this error in the site console.

http://localhost:2087/%7B%7Bp.CharmType%20%7C%20enumCharmUrl%7D%7D 404 error

What is the best way to avoid this happening until this url is available.

Thanks

Answer 1

use ng-src INSTEAD of src

same applies to href

use ng-href INSTEAD of href

This applies whenever there is an expression in the src or the href

An expression being the bit in double curly brackets :)

Answer 2

Just use ng-src instead of src:

<img lass="img-circle" ng-src="{{p.CharmType | enumCharmUrl}}">

ngSrc