AngularJS Tip - Avoid Multiple Variables in ng-src

Before I start, let me be clear I'm still learning AngularJS and this "tip" may be 100% wrong. I just ran into this with an application and most likely there is a better way to address what I did.

In the application I'm building, I've got a detail page that displays an image. The site uses an image folder that uses a subdirectory for the size of the image, so for example, the base image folder is: For the thumbnail of product X, the image would be: For the larger size, it would be:

To make things simpler, I used a partial that looked like this.

<img ng-src="{{imageroot}}/{{product.image}}">

For folks who don't know Angular, the ng-src directive ensures that when the partial is loaded, the browser doesn't try to load an invalid image. If I had used src="...", there would be two network requests - first for the tokenized version of the URL and then for the real value.

I thought this was working fine, but I then noticed something odd in my network tools - a request for From what I can see, it looks like Angular sets the src of the image element as soon as it is able to replace one of the tokens.

To fix this, I simply edited the template to use one variable and I set that value properly in my controller.

<img ng-src="{{image}}">

The controller code:

$scope.product = data;
$scope.image = IMG_URL + "thumbs/" + data.image;

Like This?

If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can also subscribe to the email feed to get notified of new posts.