CODEWITHSUNDEEP
javascriptangularjs
Ade
Ade

Reputation: 181

AngularJS not parsing curly braces properly

<li ng-repeat="appliance in appliances | limitTo:2">
  <div class="icon">
    <img src="images/vector/Appliances/w-{{appliance.DashboardIcon}}.svg">
  </div>
  <div class="label">{{ appliance.Label }}</div>
</li>

In AngularJS I can see in the console that it tries to load '/images/vector/Appliances/w-%7B%7Bappliance.DashboardIcon%7D%7D.svg'. Now my ng-repeat works just fine. If I decodeURIComponent I see that the above %7B and %7D are '{' and '}' respectively. How can I prevent this error from happening?

Upvotes: 2

Views: 254

Answers (2)

Vipin Jain
Vipin Jain

Reputation: 3756

Use ng-src here instead src

 <img ng-src="images/vector/Appliances/w-{{appliance.DashboardIcon}}.svg">

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.

The buggy way to write it:

<img src="http://www.gravatar.com/avatar/{{hash}}" alt="Description"/>

The correct way to write it:

<img ng-src="http://www.gravatar.com/avatar/{{hash}}" alt="Description" />\\

For more info see this link https://docs.angularjs.org/api/ng/directive/ngSrc

Upvotes: 4

Serginho
Serginho

Reputation: 7490

You have to use ng-src, if you use src, the browser tries to load the image before angular's loaded, that's why ng-src exists.

<img ng-src="images/vector/Appliances/w-{{appliance.DashboardIcon}}.svg">

Upvotes: 2

Related Questions