Angularjs отображает изображение по умолчанию, если оригинал не существует

Ответ 1

Вы можете создать директиву checkImage, чтобы проверить, действительно ли изображение существует:

<img check-image ng-src="{{img}}" alt="Image" width="100%"  >

Директива

myApp.directive('checkImage', function($http) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            attrs.$observe('ngSrc', function(ngSrc) {
                $http.get(ngSrc).success(function(){
                    alert('image exist');
                }).error(function(){
                    alert('image not exist');
                    element.attr('src', '/images/default_user.jpg'); // set default image
                });
            });
        }
    };
});

Смотрите демонстрацию http://jsfiddle.net/manzapanza/dtt1z5p8/

Ответ 2

Вы можете передать выражение атрибуту alt:

<img alt="{{user_image}}" src="/images/profile_images/{{result.image}}">

Забастовкa >

Изменить: Doh, неверно изложите свой вопрос. В вашем контроллере (или службе, предоставляющей изображение контроллеру) вы можете установить result.image на изображение пользователя или изображение по умолчанию.

Другой вариант - использовать условную логику в ng-src:

<img ng-src="{{ result.image || 'default_user.jpg' }}"/>

Это установит src в result.image, если он существует, в противном случае по умолчанию.

Лично мне нравится первый вариант лучше, так как он держит логику вне представления, но я уверен, вы могли бы найти человека, который будет утверждать, что он принадлежит в представлении, поскольку это логика представления.

Изменить 2: здесь находится plnkr: http://plnkr.co/edit/vfYU8T3PlzjQPxAaC5bK?p=preview

Ответ 3

App.directive('checkImage', function ($q) {
return {
    restrict: 'A',
    link: function (scope, element, attrs) {
        attrs.$observe('ngSrc', function (ngSrc) {
            var deferred = $q.defer();
            var image = new Image();
            image.onerror = function () {
                deferred.resolve(false);
                element.attr('src', BASE_URL + '/assets/images/default_photo.png'); // set default image
            };
            image.onload = function () {
                deferred.resolve(true);
            };
            image.src = ngSrc;
            return deferred.promise;
        });
    }
};

});

Ответ 4

Ранее упомянутые решения удваивают HTTP-запросы. Каждое изображение будет загружено дважды!

Это решение не перезагружает изображение, чтобы увидеть, существует ли оно:

myApp.directive('checkImage', function() {
   return {
      link: function(scope, element, attrs) {
         element.bind('error', function() {
            element.attr('src', '/images/default_user.jpg'); // set default image
         });
       }
   }
});

Ответ 5

Если вы используете Ionic 2, вы можете попробовать это, это сработало для меня:

<img src="{{data.imgPath || 'assets/img/empty.png'}}" >

Ответ 6

Просто для удовольствия, Angular 2 уже в пути. Согласно спецификации ngIf может решить любую директиву. Нет необходимости в сложных директивах. Создайте проверку класса для объекта результата, у которого есть проверка проверки метода, существует как @manzapanza. Постройте определение класса следующим образом:

<div *ngIf=result.isImageExists()>
<img [src]="result.image" /> 
</div> 
<div *ngIf=!result.isImageExists()>
<img [src]="result.defaultImage" /> 
</div> 

Я думаю, что новый angular лучше и понятнее. Надежда Помощь!;