无法加载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字符串加载为图像？

- arun kumar

---

你的代码看起来没有问题。你尝试过复制 ng-src 的值并将其放入浏览器地址栏中，以检查数据 URL 是否有效吗？ - MMhunter

当我尝试加载ng-src值（即data-ng-src="data:image/jpg;base64,base64字符串值"）时，它显示该网站无法访问。我的base64字符串有问题吗？ 我编写了一个Web服务，它将从本地机器（即c:\images）转换图像为base64，并将其作为响应发送到AngularJS。 在AngularJS中，我将响应值分配给$scope.product.image。当我尝试使用ng-src加载此值时，出现此错误。 我错过了什么吗？ - arun kumar

Answer 1

您得到的错误意味着数据URL本身不正确。由于您的前缀是正确的，所以您获取的base64字符串可能存在问题。尝试将数据URL放入浏览器地址栏中并检查其是否有效。

- MMhunter

---

当我尝试加载ng-src值（即data-ng-src="data:image/jpg;base64,base64字符串值"）时，它显示此网站无法访问。我的base64字符串有问题吗？ 我编写了一个Web服务，它将从本地机器（即c:\images）转换图像为base64，并将其作为响应发送到angularJS。 在angularJS中，我将响应值分配给了$scope.product.image。当我尝试使用ng-src加载此值时，出现了这个错误。 我错过了什么吗？ - arun kumar

也许你应该先检查一下你的 Web 服务生成的 base64 是否正确。如果正确，当你在浏览器地址栏中输入 data:image/jpg;base64,base64 字符串值，窗口中会显示图片。如果 Web 服务中生成的内容是正确的，那么也许你应该检查一下客户端（angularjs）获取到的内容是否与之相同。 - MMhunter

我从Web服务中收到了相同的值。我通过在HTML中显示$scope.product.image值来检查它，它正常显示。 我编写了一个单独的Java代码，以此base64值作为输入，解码成图像并将其写入图像文件中，图像正常显示。 - arun kumar

嗯，那看起来有点奇怪。你可以尝试添加一个字符集值吗？像这样：data:image/jpeg;charset=utf-8;base64,base64字符串值，或者你确定你的图片是以jpeg格式保存的吗？ - MMhunter

添加字符集没有成功。我在Web服务中将jpg图像文件转换为base64。我的转换逻辑如下：FileInputStream imageInFile = new FileInputStream(imageFile); byte imageData[] = new byte[(int) imageFile.length()]; imageInFile.read(imageData); imageDataString = Base64.encodeBase64URLSafeString(imageData);如果转换逻辑有问题，那么通过独立的Java代码，我可以解码图像。我认为HTML中的加载机制存在问题。 - arun kumar

那我不知道问题在哪里。如果你找到了解决方案，请告诉我 :D。 - MMhunter

Answer 2

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

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

在控制器中：

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

- Punit Gajjar

Answer 3

尝试使用以下内容：

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

- envy