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?

Answer 1

Angular有自己的img指令，称为ng-src ：

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

Answer 2

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!