javascript - 无法加载 base64 图像

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

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

既然你的前缀是正确的，那你得到的base64字符串肯定有问题。

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