How to prevent ng-src to load image before data arrives?

Question

HTML:

 <img ng-src="{{plugins.filesPath.album_images.image}}{{album.cover_image}}" alt="{{album.title}}" />

While running the app, it shows error:

GET http://url.com/myApp/files/album_images/image/ 403 (Forbidden) 

"http://url.com/myApp/files/album_images/image/" is the value of {{plugins.filesPath.album_images.image}}.

It shows error because it goes to load the image before all data arrives..

How can i prevent this error in console?

Answer 1

Try to use the conditional pattern condition && true || false

Therefore modify ng-src attribute like this:

<img ng-src="{{ album && plugins.filesPath.album_images.image + album.cover_image || '' }}" alt="{{album.title}}" />

With this change, the content of src attribute is empty until the data arrives.

Source: Conditionally change img src based on model data

Answer 2

Update March 2015

Using Angular 1.3.x should make most custom data checks obsolete, since $interpolate now includes a flag "allOrNothing" that will wait for ALL bindings to be something other than undefined, before actually resolving the expression.

So in this case, ng-src will only insert the src attribute once both album_images.image and album.cover_image are ready. Still, depending on your setup, album.title might not be ready yet, so if you want to wait for that you could still use the isDataAvailable() approach.

Original Answer:

Now that there's ng-if, one could try

<img ng-if="isDataAvailable()" ng-src="{{plugins.filesPath.album_images.image}}{{album.cover_image}}" alt="{{album.title}}" />

$scope.isDataAvailable = function(){
    // do your data checks here and
    // return true;
}

That way the image is only appended to the DOM as soon as isDataAvailable returns true and only then ng-src will kick in and try to get the file.

Still, I'm pretty sure, 403 (Forbidden) is somewhat related to directory/file access restrictions on your server.

Answer 3

I believe ng-src waits for it's value to change to apply a src value to the element. Did you try changing

<img ng-src="{{plugins.filesPath.album_images.image}}{{album.cover_image}}"

to

<img ng-src="{{plugins.filesPath.album_images.image + album.cover_image}}" ?

EDIT - revised answer

As ng-src waits for the information in {{}} to change, it has no way of knowing if EVERY aspect of it is ready. I can think of two possible solutions:

a) Make a url_when_ready() function, that takes strings as arguments and concatenates them, only returning a value if all of the strings are defined. Then do

ng-src="{{url_when_ready([plugins.filesPath.album_images.image, album.cover_image])}}

b) create a model $scope.album.cover_image_full that updates when $scope.album.cover_image is ready, and use that as the ng-src value