无法加载 base64 图像答案

【问题标题】：Not able to load base64 image无法加载 base64 图像
【发布时间】：2016-11-17 13:09:29
【问题描述】：

在加载我的 HTML 页面时，我有一个用 AngularJS 编写的 onload 函数，它将从服务器获取图像文件的 base64 字符串，并将这个 base64 字符串存储在 $scope.product.image 中。当我尝试显示这个 base64 string ，我在控制台中收到 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字符串加载为图片？

【问题讨论】：

看不到您的代码有任何问题。您是否尝试过复制ng-src 值并将其放在浏览器地址栏中以检查数据URL 是否有效？
当我尝试加载 ng-src 值（即 data-ng-src="data:image/jpg;base64,base64 字符串值）时，它说这个无法访问站点。我的 base64 字符串有什么问题吗。我编写了一个 Web 服务，它将图像从本地机器（即 c:\images）转换为 base64 并将其作为对 angularJS 的响应发送。在 angularJS ，我已将响应值分配给 $scope.product.image。当我尝试使用 ng-src 加载此值时，出现此错误。我错过了什么吗？？

标签： javascript html angularjs base64

【解决方案1】：

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

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

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

【讨论】：

当我尝试加载 ng-src 值（即 data-ng-src="data:image/jpg;base64,base64 字符串值）时，它说这个无法访问站点。我的 base64 字符串有什么问题吗。我编写了一个 Web 服务，它将图像从本地机器（即 c:\images）转换为 base64 并将其作为对 angularJS 的响应发送。在 angularJS ，我已将响应值分配给 $scope.product.image。当我尝试使用 ng-src 加载此值时，出现此错误。我错过了什么吗？？
也许你应该首先检查你的 web 服务中生成的 base64 是否有效。如果正确，当你在浏览器的地址栏中输入data:image/jpg;base64,base64 string value 时，窗口中就会出现图像。如果正确生成了 web 服务中的内容，也许您应该检查它是否与您在客户端（在 angularjs 中）获得的内容相同。
我从 webservice 收到了相同的值。我通过在 html 中显示 $scope.product.image 值来检查这一点，它显示正确。我编写了一个单独的 java 代码，将此 base64 值作为输入，解码为图像并将其写入图像文件中，并且图像正确显示。
嗯，这看起来很奇怪。你可以尝试添加一个字符集值吗？比如data:image/jpeg;charset=utf-8;base64,base64 string value，或者你确定你的图片是jpeg格式吗？
添加字符集不走运。我在 web 服务中将 jpg 图像文件转换为 base64。我的转换逻辑看起来像这样FileInputStream imageInFile = new FileInputStream(imageFile); byte imageData[] = new byte[(int) imageFile.length()]; imageInFile.read(imageData); imageDataString = Base64.encodeBase64URLSafeString(imageData); 如果转换逻辑是问题，那么通过独立的 java 代码，我可以解码图像。我认为 HTML 中的加载机制存在一些问题

【解决方案2】：

通过这样的函数调用图像数据：

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

在控制器中：

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

【讨论】：

【解决方案3】：

尝试如下使用：

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

【讨论】：