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

Question

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?

Use ng-src instead of src

David R
– David R

2017-01-06 09:53:00 +00:00
Commented Jan 6, 2017 at 9:53 — David R
– David R, Commented Jan 6, 2017 at 9:53

Mistalis · Accepted Answer · 2017-03-01 15:57:21Z

19

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

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

edited Mar 1, 2017 at 15:57

answered Jan 6, 2017 at 9:53

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

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

Comments

David R · Accepted Answer · 2017-01-06 09:54:50Z

3

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!

answered Jan 6, 2017 at 9:54

David R

15.7k8 gold badges59 silver badges74 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related