CODEWITHSUNDEEP
angularjs
Amb
Amb

Reputation: 3353

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

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?

Upvotes: 28

Views: 29748

Answers (4)

robro
robro

Reputation: 1800

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.

Upvotes: 11

mayankcpdixit
mayankcpdixit

Reputation: 2464

like everyone else you can always show a loading sign before the image is completely loaded on the page. here is a fiddle containing the demo. you can use a different image in background before loading using .css('background-image','url('+ url_link_var +')');

This is done and shown in Fiddle.

Upvotes: 0

Audio
Audio

Reputation: 476

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

Upvotes: 32

Tiago Rold&#227;o
Tiago Rold&#227;o

Reputation: 10649

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

Upvotes: 6

Related Questions