javascript - Angularjs:在另一个https请求后显示远程生成的图像

Question

我遇到了一个小问题。我正在使用 Angularjs (1.6) 制作一个页面。在其中一个页面上，我必须从服务器检索一些数据，然后必须再次调用来生成 QR 码，该二维码将从服务器作为 png 图像返回。

我所做的是:

function generateQrCode (){
       
       if (vm.detail !== null) {
            return myService.getQrCode(vm.detail.mydata.lockers[0]);
        }
        return null;
    };

vm.$onInit = function () {
            vm.id = $stateParams.id;
            vm.barcode = null;
...

myService.getmyDetail(vm.id).then(function (response) {
            vm.detail = response.data;
            vm.barcode = generateBarcode()
...

然后，在模板中我有:

 <img ng-src="{{detailCtrl.barcode}}">

我可以看到服务完成的调用，即返回一个 png 图像(不是 URL，而是 png 数据)，在前端没有任何反应，我的意思是有一个损坏的图像并检查它返回:

<img ng-src="{}">

我哪里错了？

服务正在返回:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQAQAAAACoxAthAAABUklEQVR42u3auxGDMAyAYXMpUmaEjMJoZLSMwgiUKXJRiB8gk8fBHbZS/Kp4fZ3OsoSdbA4HgUAgEAgEAoFAILuRh5ujFRlcdx+v5KYeQyD1ySle3QIZ4xxvfPQQiAm5uJC87SutUyb7G3eAQKxJXGBDJkMg/0JELv4rCMSaqLqfSv2GrQIEUoCoLsmndczklY0VBFKAZDFvR1ePoSCQAmSq7irOEgZMfhMAgZiR8cFRrs30elxgm591HwIpSHy+LpI3fDVvAiAQAyJ+jJT8IR/HOwjEhkio+1mX1Ma2vodArIgaML3SOmwChlXNOwSyO1nMlFz4MZSnNQRSnagJ/DRTSpncfZ4pQSDliTrdcdIt0/D9LBwEUo3IlLzpf6XunyAQE+IX2LkxGvQNBFKX5HX/bRMAgdQni9Md2aGjNY0VBLI72RAQCAQCgUAgEAgEYkKezTXAEZxxE/MAAAAASUVORK5CYII=

Answer 1

您收到的图像数据是 RAW 格式，您必须使用以下方式显示它 dataNgSrc 指令

例如:

<img data-ng-src="data:image/png;base64,{{imageResultApi}}"/>

这是一个工作示例

var app = angular.module('app',[]);

app.controller('ctrl',ctrl);

function ctrl($scope) {
    $scope.image ="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQAQAAAACoxAthAAABUklEQVR42u3auxGDMAyAYXMpUmaEjMJoZLSMwgiUKXJRiB8gk8fBHbZS/Kp4fZ3OsoSdbA4HgUAgEAgEAoFAILuRh5ujFRlcdx+v5KYeQyD1ySle3QIZ4xxvfPQQiAm5uJC87SutUyb7G3eAQKxJXGBDJkMg/0JELv4rCMSaqLqfSv2GrQIEUoCoLsmndczklY0VBFKAZDFvR1ePoSCQAmSq7irOEgZMfhMAgZiR8cFRrs30elxgm591HwIpSHy+LpI3fDVvAiAQAyJ+jJT8IR/HOwjEhkio+1mX1Ma2vodArIgaML3SOmwChlXNOwSyO1nMlFz4MZSnNQRSnagJ/DRTSpncfZ4pQSDliTrdcdIt0/D9LBwEUo3IlLzpf6XunyAQE+IX2LkxGvQNBFKX5HX/bRMAgdQni9Md2aGjNY0VBLI72RAQCAQCgUAgEAgEYkKezTXAEZxxE/MAAAAASUVORK5CYII=";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
    <img data-ng-src="{{image}}">
</div>