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

Question

HTML:

While running the app, it

Answer 1

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

$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.