CODEWITHSUNDEEP
angularjsasynchronous
user554180
user554180

Reputation:

Angualrjs ng-src async image loading from a function call

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?

Upvotes: 2

Views: 8863

Answers (1)

jlr
jlr

Reputation: 1530

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.

Upvotes: 9

Related Questions