CODEWITHSUNDEEP
angularjs
Christian Giupponi
Christian Giupponi

Reputation: 7618

Angular and html - Failed to load resource

I have a page that use AngularJS to display data and base on the user choice it display images.

The site works but in the console I have this issue:

Failed to load resource: the server responded with a status of 404 (Not Found) http://mysite.app/images/places/undefined

This is the html:

<img width="100%" height="100%" ng-src="@{{ selectedEvent.place.image | addFullPathToImage }}" alt="@{{ selectedEvent.place.name }}">

and this is the angular code:

app.filter('addFullPathToImage', function () {
    return function (text) {
        return mysite.paths.placesPath + "/" + text;
    }
});

The image works, how can I remove the console error?

Upvotes: 2

Views: 859

Answers (1)

floribon
floribon

Reputation: 19183

Apparently selectedEvent.place.image is first resolved to undefined on a first digest cycle, which gives you the 404, and later its actual value is set and another digest cycle displays the image.

You could go through your code to understand why is this done in 2 different cycles. Are you using an async operation, such a server call, before setting selectedEvent.place.image?

A quick work around would be to only put the image in the HTML once its value has been set in the scope. To do that you just have to add a ng-if like this:

<img
  ng-if  = "selectedEvent.place.image"
  width  = "100%"
  height = "100%"
  ng-src = "@{{ selectedEvent.place.image | addFullPathToImage }}"
  alt    = "@{{ selectedEvent.place.name }}"
>

PS: width and height attribute are quite obsolete, you should try to use a style attribute or a separate CSS instead.

Upvotes: 1

Related Questions