angularjs显示默认的图像，如果原来不存在

我想告诉用户图像如果图像存在，如：angularjs显示默认的图像，如果原来不存在

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

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

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

如何通过html页面中的angularjs来做到这一点？

来源

2015-02-05 Arvind Kushwaha

通过图像不存在，你的意思是由服务器返回一个HTTP代码404？如果是这样，我不认为这是可能的，因为谁实际处理图像是浏览器，Angular只是建立网址。你可以做的是让Web服务器返回一个默认图像，如果指定的图像不存在。 – 2015-02-05 14:00:51

~~您可以到alt属性的表达传递：~~

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

编辑：卫生署，误解你的问题。在您的控制器（或将图像提供给控制器的服务）中，可以将result.image设置为用户图像或默认图像。

另一种选择是在NG-SRC使用条件逻辑：

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

这将设置src到result.image如果它存在，否则默认值。个人而言，我更喜欢第一种选择，因为它将逻辑放在视图之外，但我敢打赌，你可以找到某个人认为它属于视图，因为它是视图逻辑。

编辑2：这里是一个plnkr：http://plnkr.co/edit/vfYU8T3PlzjQPxAaC5bK?p=preview

来源

2015-02-05 13:57:09 Noel

不，我想改变'src'的值而不是'alt'。我如何检查{{result.image}}是否为空或具有某些值..？ – 2015-02-05 14:02:47

查看已更新的答案。 – Noel 2015-02-05 14:25:57

如果'result.image == null'这个效果完美，但我认为作者想知道服务器上存在的实际图像 – 2015-09-17 14:54:42

您可以创建一个指令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/

来源

2015-02-06 14:23:30 manzapanza

当我使用它时，它将始终设置默认图像，即使我有一个来源，怎么来？ – Lobato 2016-05-17 13:34:07

@ S.RLobato可能是因为CORS问题，图像是否与您正在加载脚本的域不同？ – Horse 2017-01-09 14:12:17

@SaaksshiTyagi：如果你认为你有[更好的解决方案]（https://stackoverflow.com/review/suggested-edits/17252100），你应该把它作为一个单独的答案。 – 2017-09-06 14:45:46

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

}）;

来源

2015-08-14 09:05:54 Mehul

如果你可以添加一些解释来支持这段代码，那就太好了！ – 2015-08-14 09:21:43

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

来源

2015-11-12 08:38:13 mvermand

这将与角4一起工作？ – 2017-06-30 09:39:40

这是一个AngularJS指令，不会像Angular2/4那样工作，但这个概念依然存在。您可以将此代码移植到Angular代码中。 – mvermand 2017-06-30 09:59:27

只是为了好玩，角2是在路上。根据规范ngIf可以解决任何指令。不需要复杂的指令。建立一个类，检查具有方法检查图像的结果对象是否存在于@manzapanza中。建立一个类定义如下：

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

我认为新的角度更好，更清晰。希望帮助！;

来源

2016-08-10 18:22:11

如果使用离子2你可以试试这个，它的工作对我来说：

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

来源

2017-08-31 12:49:49

angularjs显示默认的图像，如果原来不存在

回答

相关问题