Question

请让我详细说明这个问题。

我正在通过点击返回图像的api来获取用户个人资料照片，如下面的屏幕截图所示

我无法在IMG标记src中找到api url，因为我需要使用get请求在access token中传递headers。

以下是我正在执行的代码

vm.getDp = function () {
    if (vm.userDetails.hasDp) {
        userService.getProfilePic(vm.userDetails.id, vm.userDetails.profileImageUrl, accessToken)
            .then(function (data) {
                $("#theDp").attr('src', 'data:image/jpg;base64,' + data);
            }, function (error) {

            });
    }
}

Answer 1

由于您使用的是AngularJS，让我们停止使用jQuery来完成我们的工作。您可以使用ngSrc指令将范围变量绑定到图像的src属性。

通过使用指令

准备HTML

<img ng-src="{{vm.img_data}}" alt="Description" />

然后，您可以通过设置检索到的数据来显示图像。

vm.getDp = function () {
    if (vm.userDetails.hasDp) {
        userService.getProfilePic(vm.userDetails.id, vm.userDetails.profileImageUrl, accessToken)
            .then(function (data) {
                vm.img_data = 'data:image/jpg;base64,' + data;
            }, function (error) {

            });
    }
}

为防止显示损坏的图片，您可以将img元素包装在ngIf指令中。

示例
注意小红点，即图片。

angular.module('app', []); angular .module('app') .controller('ImageShower', ImageShower); function ImageShower($scope) { var vm = this; vm.image_data = false; vm.title = 'Image Shower'; activate(); function activate() { vm.image_data = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg=='; } }

<!doctype html> <html ng-app="app"> <head> <meta charset="utf-8"> <title>Your Shopping Cart</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> </head> <body ng-controller="ImageShower as vm"> <h1>{{vm.title}}</h1> <img ng-src="{{vm.image_data}}" alt="Description" /> <p>{{vm.image_data}}</p> </body> </html>

Angularjs：如何将图像数据设置为IMG标记

1 个答案: