Условие AngularJS ng-src, если не найдено (через URL)

Я переношу кучу изображений, которые я хранил локально, в онлайн-ресурс, который остается актуальным. Первоначально, когда я сохранял изображения локально, я мог использовать следующее условие для моих изображений.

<img ng-src="/Content/champions/{{Champions1[champ1-1].cName.trim() || 'None'}}.png"

Это захватит текущий путь изображения, основанный на имени, и если он не существует, он просто вернет путь к изображению /Content/champions/None.png

Я решил, что это будет работать одинаково с помощью URL-адреса. Поэтому я сделал синтаксис.

<img ng-src="http://ddragon.leagueoflegends.com/cdn/4.20.1/img/champion/{{Champions1[champ1-1].cName.trim() 
|| 
'/Content/champions/None'}}.png"

То, что я предположил, произойдет, заключается в том, что если приведенный выше URL-адрес вернул 404 (Not Found), он вернется к моему локальному хранилищу для изображения None. Тем не менее, он по-прежнему пытается отобразить онлайн-изображение и показывает значок "сломанное изображение/изображение", а не кондиционирование по сравнению с моим местным изображением "Нет".

Как я могу это исправить? Или почему Angular не отвечает правильно на этот сценарий, когда говорит "Не найдено" 404 (Not Found)?

Иногда он пытается добавить условный синтаксис к URL-адресу, а не пересматривать в домашнем каталоге, может быть, проблема? т.е. он иногда возвращает следующее, а не перезапускает из моей папки Content. http://ddragon.leagueoflegends.com/cdn/4.20.1/img/champion//Content/champions/None.png

ОТВЕТЫ

Ответ 1

{{Champions1[champ1-1].cName || 'None'}}

Эта конструкция заменит ваше имя изображения на 'None' только тогда, когда ваше изображение равно null или undefined.

Angular директива ngSrc не имеет встроенных функций для обработки ответа 404.

Но это было бы исправлено с помощью следующей директивы onErrorSrc.

var myApp = angular.module('myApp',[]);

myApp.directive('onErrorSrc', function() {
    return {
        link: function(scope, element, attrs) {
          element.bind('error', function() {
            if (attrs.src != attrs.onErrorSrc) {
              attrs.$set('src', attrs.onErrorSrc);
            }
          });
        }
    }
});

<img ng-src="wrongUrl.png" on-error-src="http://google.com/favicon.ico"/>

См. пример JSFiddle

Ответ 2

Другим простым решением является использование следующего кода, который выполняет тот же конечный результат:

<img ng-src="{{ yourImageCurrentScopeVar }}" onerror="this.src='img/default-image-when-occur-a-error.png'"/>

Ответ 3

Я использовал это:

            <img ng-src="{{ '/api/whatever/' + id + '/image/' }}"
                onerror="angular.element(this).scope().imgError()"
                onload="angular.element(this).scope().imgLoaded()" />

imgError() и imgLoaded() - это функции в контроллере для этой страницы. Этот метод особенно подходит для моих целей, потому что в нем я устанавливаю переменную области видимости, чтобы полностью скрыть изображение, когда оно не загружено, и замените его интернационализированным текстовым сообщением о том, что изображение не найдено.