Over a million developers have joined DZone.

AngularJS Tip - Avoid Multiple Variables in ng-src

DZone's Guide to

AngularJS Tip - Avoid Multiple Variables in ng-src

· Java Zone ·
Free Resource

Get the Edge with a Professional Java IDE. 30-day free trial.

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: foo.com/products/images. For the thumbnail of product X, the image would be: foo.com/products/images/thumbs/x.jpg. For the larger size, it would be: foo.com/products/images/large/x.jpg.

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 foo.com/products/images/thumbs. 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;

Get the Java IDE that understands code & makes developing enjoyable. Level up your code with IntelliJ IDEA. Download the free trial.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}