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

You have a type-o in "<img class...". Also, localhost url works only on your environment. — user4276238
– user4276238, Commented Jan 14, 2016 at 18:12

danday74 · Accepted Answer · 2016-01-14 18:09:40Z

9

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 :)

answered Jan 14, 2016 at 18:09

danday74

58.1k56 gold badges273 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Omri Aharon · Accepted Answer · 2016-01-14 18:09:50Z

5

Just use ng-src instead of src:

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

ngSrc

answered Jan 14, 2016 at 18:09

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

Collectives™ on Stack Overflow

AngularJS can produce a 404 error when using variable for image

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related