Question

我需要显示用户个人资料图片。但是从DB，我没有任何图像领域。所以我在一个文件夹中使用UserId。现在如果我显示一个用户详细信息，我需要使用angularjs使用UserId显示文件夹中的用户个人资料图片。

如果图像不可用，需要显示默认图像。

我需要使用anglarjs这样做。我通过角度控制器的LoggedUser详细信息获取用户详细信息。

先谢谢

Answer 1

我的解决方案非常简单：

如果图片为空或＆＃39;＆＃39;，请更改默认图片链接。

例如：

    $scope.defaultImageUrl = 'any url...';
    if ( !$scope.LoggedUser.profileImage || $scope.LoggedUser.profileImage === '' ) {
      $scope.LoggedUser.profileImage = $scope.defaultImageUrl;
    }

没有控制器声明的相同解决方案：

<img data-ng-src="{{ LoggedUser.profileImage || defaultImageUrl }}">

使用$ http模块的解决方案。

将profileImage设置为false。
设置默认图片的网址。
向唯一用户图片发送获取请求。
如果请求成功，请将url设置为profileimage，否则记录错误。

＆＃13;

$scope.LoggedUser.profileImage = false;
$scope.profileImageUrl = 'content/images/'+$scope.LoggedUser.userid+'.jpg';
$http.get( $scope.profileImageUrl )
.then( function() {
    $scope.LoggedUser.profileImage = $scope.profileImageUrl;
  }, function( error ) {
    console.log( 'image error: ', error );
  }
);

＆＃13;

Answer 2

最后，如果在目录中找不到src图像，我找到了显示默认图像的解决方案。

angular.module("Test").directive('errSrc', 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', '/content/images/ProfileImages/profile.png'); // set default image
                };
                image.onload = function () {
                    deferred.resolve(true);
                };
                image.src = ngSrc;
                return deferred.promise;
            });
        }
    };
});

in View:
  <img ng-src="/content/images/ProfileImages/{{vm.userDetails.UserGuid}}.jpg" err-src alt="" width="60%">

再次感谢所有人帮我解决这个问题。

检查文件夹中的图像并显示图像（如果存在）或使用angularjs显示默认图像

2 个答案: