Question

我正在尝试从JSON数据中解码base64图像，并尝试将其绑定到DOM，但是未显示该图像。

请检查以下代码：

.then(function mySuccess(response) {

        $rootScope.vehiclenumber = response.data.vehicleNumber;
        $rootScope.emailDriver = response.data.email;
        imgUrl: "data:image/png;base64," + response.data.image;
        $rootScope.userNamedriver = response.data.Name;
        $rootScope.namedriver = response.data.userName;
        console.log($rootScope.imgUrl);

        $state.go('app.user');

      }

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

当我管理imgURL时，它是未定义的。

Answer 1

尝试一下：

我也将imgUrl放在了rootScope上。不过，未经测试，也不确定使用rootScope是否是存储数据的最佳位置。

还要注意，您在模板中使用了imgURL而不是imgUrl。

.then(function mySuccess(response) {
    $rootScope.vehiclenumber = response.data.vehicleNumber;
    $rootScope.emailDriver = response.data.email;
    $rootScope.imgUrl = "data:image/png;base64," + response.data.image;
    $rootScope.userNamedriver = response.data.Name;
    $rootScope.namedriver = response.data.userName;
    console.log($rootScope.imgUrl);

    $state.go('app.user');

  }


<div>
    <img data-ng-src="{{imgUrl}}" />   
</div>

Answer 2

这是相同的工作代码。我已经在Angular 5中完成了类似的任务，因此请按照以下步骤操作：-

1）创建如下函数 getFileEncode（fileType：string）{

    var encodevalue: string;
    switch (fileType.toUpperCase()) {

        case "PNG": encodevalue = 'data:image/jpeg;base64,'; break;
        case "JPG": encodevalue = 'data:image/png;base64,'; break;
        case "GIF": encodevalue = 'data:image/gif;base64,'; break;

    }
    return encodevalue;
}

2)  Var fileData = this.getFileEncode("PNG") + response.data.image;
//response.data.image should contain a byte array.

3)  Now bind to SRC of img tag as follows
$('#preview').attr('src', fileData).fadeIn('slow');

4）您正在从Web服务器接收json中的数据，因此应注意从json获取字节数组，也许是因为您需要进行一些转换。

Base 64转换错误角度js

2 个答案: