Angualrjs ng-src async image loading from a function call

Question

I am wondering if it's possible to assign a result of a function call to an ng-src in an image?

Basically, I need to retrieve a set of thumbnails for a set of data from an aspx page, there may or may not be a thumbnail. So I need to show a different preset image for a case when there is nothing returned from the thumbnail page.

Something like this:

<img ng-src="getThumbnail({{ item.Id }})" />

Where getThumbnail is a function which makes a http request to a url such as

http://localhost/Srv/getThumbnail.aspx?id=111

I've tried this but Angular is producing this:

<img ng-src="getThumbnail(111)" src="getThumbnail(111)">

Instead of calling the function. Is there a better way for doing this?

Answer 1

I've commented on your question but I'll offer my suggestion as a solution after looking at the AngularJS documentation. The ng-src directive will correctly set the src attribute of img. This directive can contain Angular expressions and these can call functions contained in your controller and reachable in the current scope. Hence instead of:

<img ng-src="getThumbnail({{ item.Id }})" />

Try this:

<img ng-src="{{ getThumbnail(item.Id) }}" />

In the former declaration, the function isn't available to the Angular scope, but it is in the latter. (If I am not mistaken, as I haven't tried the code myself).

Make sure the getThumbnail function is in a controller that is reachable to the current scope.