CODEWITHSUNDEEP
angularjs
Einius
Einius

Reputation: 1382

Resource not found when loading images which names depends on AngularJS variable

I use AngularJS in my website and some images are loaded like this:

<img ng-cloak src="{{ person.username }}"/>

the problem is that I get 404 errors in console that the image is not found because before angular is laoded it tries to load image named {{ person.username }}

How do I solve this?

Upvotes: 2

Views: 237

Answers (3)

S.L&#246;we
S.L&#246;we

Reputation: 181

The problem is, that the browser tries to load the resource before the expression is evaluated by angular. That's why there are build in directives as ng-href or ng-src that should be used.

Upvotes: 0

antoinestv
antoinestv

Reputation: 3306

You can simply use :

ng-src

Example : 

<img ng-cloak ng-src="{{ person.username }}"/>

Upvotes: 1

Vineet
Vineet

Reputation: 4635

Use ng-src

Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.

 <img ng-cloak ng-src="{{ person.username }}"/>

Upvotes: 2

Related Questions