Question

如果图像存在，我想显示用户图像，如：

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

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

<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

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

}）;

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

Answer 5

如果你正在使用Ionic 2，你可以尝试这个，它对我有用：

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

Answer 6

只为了好玩， Angular 2正在路上。根据规范，ngIf可以在任何指令中解决。没有必要复杂的指令。构建一个类检查结果对象，其中方法检查图像存在，如@manzapanza所做的那样。按如下方式构建类定义：

SELECT 
    datepart(qq, o.created_date),
    count(DISTINCT o.order_id),
    sum(o.order_margin)
FROM
    orders o
WHERE  
    o.account_id IN (SELECT e.account_id
                     FROM emailsegment e
                     WHERE e.segment = 'H')
    AND o.created_date >= '1/1/2016'
    AND o.order_status = 'Shipped'
GROUP BY 
    datepart(qq, o.created_date)
ORDER BY 
    datepart(qq, o.created_date)

我认为新角度更好更清晰。 Hope Helpes !!;

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

6 个答案: