Question

在加载我的HTML页面时，我有一个用AngularJS编写的onload函数，它将从服务器获取一个base64字符串的图像文件，并将这个base64字符串存储在$ scope.product.image中。当我尝试显示这个base64 字符串，我在控制台中收到ERR_INVALID_URL错误。

错误消息如下所示： GET：data：image / jpg; base64,9j_4AAQSK .......... net：ERR_INVALID_URL

我的HTML看起来像这样

<section ng-show="product.image">
            {{product.image}}  /* This actually displays the content of base64 string. This confirms that value is reaching properly*/
            <img ng-src="{{'data:image/jpg;base64,'+product.image}}"/>
</section>

我的app.js看起来像这样

$scope.onload = function()
{
    $http({method:'GET', url:'rest/product/onLoad'})
    .success(function (response){
        $scope.product.image = response.image;

    });
};

我试过<img data-ng-src="data:image/jpg;base64,{{product.image}}">，但没有运气。

如何将base64字符串加载为图像？

Answer 1

错误你得到意味着数据网址本身不正确。

由于你的前缀是正确的，你得到的base64字符串一定有问题。

尝试将数据网址放在浏览器的地址栏中，然后检查它是否有效。

Answer 2

通过以下函数调用图像数据：

<img data-ng-src="{{getImage(product.image)}}" />

控制器中的

：

$scope.getImage = function(data){
    return 'data:image/jpeg;base64,' + data;
}

Answer 3

尝试使用如下：

ng-src="data:image/jpg;base64,{{product.image}}"

无法加载base64图像

3 个答案: