CODEWITHSUNDEEP
javascriptangularjs
Shijin TR
Shijin TR

Reputation: 7768

ng-src in angular js

We can use image src with src and ng-src in angular js

 <img src="theme/image.png" alt="Image"/>

AND 

<img ng-src="theme/image.png" alt="Image"/>

I do not feel any difference between them in showing image.is there any difference? I have a project with views are loading from an external site,do i need to change every src to ng-src?does it create any performance issue when i try to load large number of images?

Upvotes: 2

Views: 548

Answers (2)

Tushar
Tushar

Reputation: 87203

If the URL of the image is static, you can use src attribute on image.

<img src="theme/image.png" alt="Image"/>

When the URL of image is dynamic and need to set from Controller, use ng-src. any string which can contain {{}} markup

<img ng-src="{{theme}}/image.png" alt="Image"/>
//   ^^^     ^^^^^^^^^

DOCS

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.

Upvotes: 2

egellon
egellon

Reputation: 260

Let me quote

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.

Read more: https://docs.angularjs.org/api/ng/directive/ngSrc

Upvotes: 6

Related Questions