如果原始不存在,angularjs将显示默认图像

Question

如果图像存在,我想显示用户图像,如:

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

如果用户图像不可用,则应显示默认图像,Like

<img alt="user_image" src="/images/default_user.jpg">

我怎么能通过html页面中的angularjs来做到这一点？

Answer 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/

Answer 2

您可以将表达式传递给alt属性:

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

编辑: 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

Answer 3

前面提到的解决方案将使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
         });
       }
   }
});

Answer 4

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

}）;