CODEWITHSUNDEEP
javascripthtmlangularjsimagebrowser
Dan D.
Dan D.

Reputation: 8557

AngularJS binding in 'src' attribute of <img> tag

I have a table with many rows and each row has a preview image to be shown on the top right corner when mouse is hovering the row.

This is how I put the image tag with AngularJS binding for URL in src attribute:

<img src="{{imageUrl}}"/>

But there is the following error in console:

GET http://localhost/#/imageUrl 404 (Not Found)

How to get rid of this error in browser console?

Upvotes: 3

Views: 15826

Answers (2)

Mistalis
Mistalis

Reputation: 18279

Angular has its own directive for img, called ng-src:

<img ng-src="{{imageUrl}}"/>

Upvotes: 19

David R
David R

Reputation: 15639

You need to use ng-src instead of src in your <img> tag.

The documentation says like this,

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.

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

Hope this helps!

Upvotes: 3

Related Questions