ionic with angularjs image url not parsed

Question

I am using ionic to create a mobile app.

I have a list of items and each item has a photo in it.

in my angular template for each item i have:

<img src='http://www.example.com/images/listings/{{listing.id}}/thumb.jpg'>

i use ng-repeat='listing in listings' to display the template.

i keep seeing angular makes one call to the non parsed url first but for each row gets the right image and displays it:

so first it tries getting

http://www.example.com/images/listings/{{listing.id}}/thumb.jpg

not parsing {{listing.id}}.

but then it parses correctly and displays the image correctly in the list:

http://www.example.com/images/listings/3523/thumb.jpg

so if i have a list of 15 items, it makes one call non-parsed {{listing.id}} and 15 calls correctly parsed.

how do i stop this from happening?

thedoctor · Accepted Answer · 2015-02-11 16:07:20Z

2

You should be using ngSrc instead of using the interpolation directly.

<img ng-src='http://www.example.com/images/listings/{{listing.id}}/thumb.jpg'>

answered Feb 11, 2015 at 16:07

thedoctor

1,5181 gold badge12 silver badges13 bronze badges

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

1 Answer 1