Как предотвратить ng-src для загрузки изображения до поступления данных?

HTML:

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

При запуске приложения отображается ошибка:

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

"http://url.com/myApp/files/album_images/image/" - это значение {{plugins.filesPath.album_images.image}}.

Он показывает ошибку, потому что она загружается, прежде чем все данные поступят.

Как я могу предотвратить эту ошибку в консоли?

Ответ 1

Попробуйте использовать условный шаблон condition && true || false

Поэтому измените атрибут ng-src следующим образом:

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

При этом изменении содержимое атрибута src пуст, пока не поступят данные.

Источник: Условно изменить img src на основе данных модели

Ответ 2

Обновить март 2015

Использование Angular 1.3.x должно сделать большинство пользовательских проверок данных устаревшими, поскольку $интерполяция теперь включает флаг "allOrNothing" , который будет ждать для ВСЕХ привязок, чтобы быть чем-то иным, чем undefined, до фактического разрешения выражения.

Итак, в этом случае ng-src будет вставлять атрибут src только после того, как будут готовы как album_images.image , так и album.cover_image. Тем не менее, в зависимости от вашей установки, album.title может быть еще не готов, поэтому, если вы хотите дождаться этого, вы все равно можете использовать подход isDataAvailable().

Исходный ответ:

Теперь, когда там ng-if, можно попробовать

<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;
}

Таким образом, изображение добавляется только к DOM, как только isDataAvailable возвращает true, и только тогда ng-src запустится и попытается получить файл.

Тем не менее, я уверен, 403 (Forbidden) несколько связан с ограничениями доступа к каталогам/файлам на вашем сервере.

Ответ 3

Я считаю, что ng-src ожидает, что значение изменится, чтобы применить значение src к элементу. Вы пытались изменить

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

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

EDIT - пересмотренный ответ

Поскольку ng-src ожидает, что информация в {{}} изменится, у него нет способа узнать, готов ли его КАЖДЫЙ аспект. Я могу представить два возможных решения:

a) Создайте функцию url_when_ready(), которая принимает строки в качестве аргументов и объединяет их, возвращая только значение, если все строки определены. Тогда do

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

b) создать модель $scope.album.cover_image_full, которая обновляется, когда $scope.album.cover_image готова, и использовать ее как значение ng-src

Ответ 4

как и все остальные, вы всегда можете показать знак загрузки, прежде чем изображение будет полностью загружено на страницу. вот скрипка, содержащая демо. вы можете использовать другое изображение в фоновом режиме перед загрузкой, используя .css('background-image','url('+ url_link_var +')');

Это делается и отображается в Fiddle.