修改

Question

我想显示用户个人资料图片（如果存在）;否则显示默认字体真棒图标。个人资料图片名称是唯一编号，扩展名可以是以下类型(jpg, jpeg, png, gif and etc).

到目前为止我做了什么

<div ng-repeat="user in users">
    <p> {{user.name}} </p>
    <img ng-src="{{('/media/upload/' + user.id + '.jpg')}}" onerror="this.src='/media/upload/default.jpeg'" height="80px" width="80px"/>
</div>

现在它只显示带有分机 .jpg.

的图片

如何创建自定义过滤器以检查图片是否在以下扩展程序(jpg, jpeg, png, gif)中可用，如果没有则显示字体真棒图标？

感谢任何帮助和反馈！

谢谢！

Answer 1

为了实现这一点，您不需要任何过滤器，只需创建一个默认的src：

<img ng-src="{{('/media/upload/' + user.id + '.jpg')}}" src="/media/upload/default.jpeg" height="80px" width="80px"/>

ngSrc指令只有在可用时才会替换源

为了测试所有可能的扩展，我会写一个指令：

app.directive('multiSrc', function($q) {
  return {
    restrict: 'A',
    scope: { user: '=' },
    link: function(scope, element) {

      console.log(scope.user);

      var image = new Image();
      var _ext = ['jpg', 'jpeg', 'png', 'gif'];
      function _loadExt(index) {
        if(index >= _ext.length) {
          return;
        }
        _tryLoading(_ext[index])
        .then(function(successImage) {
          element[0].src = successImage.src;
        }, function() {
         return _loadExt(index + 1);
        });
      }
      function _tryLoading(extension) {
        var _defer = $q.defer();
        image.src = '/media/upload/' + scope.user.id + '.' + extension;
        image.onerror = function() {
          _defer.reject();
        };
        image.onload = function() {
          _defer.resolve(angular.copy(image));
        }
        return _defer.promise;
      }
      return _loadExt(0);
   }
 };
});

修改

这显示了实现它的一种方法。但这根本不是最佳做法。

应该这样做的方式是，当用户上传图像时，保存数据库中的路径（通常在用户对象内），然后只请求注册的路径。

角度自定义过滤器以检查图像是否存在

1 个答案:

修改