Angular and html - Не удалось загрузить ресурс

Question

У меня есть страница, которая использует AngularJS для отображения данных и базы по выбору пользователя, отображающего изображения.

Сайт работает, но в консоли у меня этот вопрос:

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

Это HTML:

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

и это угловой код:

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

изображение работает, как я могу удалить консольную ошибку?

Answer 1

По-видимому, selectedEvent.place.image впервые разрешен к неопределенному циклу первого цикла, который дает вам 404, а затем его фактическое значение устанавливается, а другой цикл дайджест отображает изображение.

Вы можете пройти через свой код, чтобы понять, почему это делается в 2 разных циклах. Используете ли вы операцию async, такой серверный вызов, перед установкой selectedEvent.place.image?

Быстрая работа должна заключаться в том, чтобы поместить изображение в HTML только после того, как его значение было задано в области. Для этого вам просто нужно добавить ng-if так:

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

PS: width и height атрибут весьма устарели, вы должны попытаться использовать атрибут style или отдельный CSS вместо этого.