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?

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?

• javascript
• html
• angularjs
• image
• browser

• 1 Use ng-src instead of src – David R Commented Jan 6, 2017 at 9:53

2 Answers 2

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

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

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!