Question

我尝试使用Angularjs下载图像，然后将其保存到mongodb并在将来显示。

首先，我只是尝试下载二进制图像并显示它并且它无法正常工作。

$scope.downloadProfileImage = function()
    {
        //Getting the user that logged in through facebook
        $authentication.getUserInfoWithoutLocation(function(respone)
        {
            //getting the url for the profile picture from facebook
            FB.api('/'+respone.id+'/picture',function(respone)
            {
                //the response hold the url of the profile picutre..trying to download it
                $http.get(respone.data.url).success(function(success)
                {
                    //success is the image binary,encoding it to base64 and bound to it
                    $scope.img = Base64.encode(success)
                })
            })
        })
    }

在html中我只有<img ng-src="{{img}}"/>。

这不起作用..为什么？即使我删除了base64编码并将$ scope.img绑定到成功，它现在仍然会显示图像..

请帮帮我。

谢谢！

Answer 1

为了显示以base64编码的图像，它必须采用以下形式：

    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />

因此，您可能需要在data:image/png;base64,前面添加$scope.img。当然这取决于你的图像格式（png，jpeg，gif）。

Answer 2

您可以使用ngSrc中的网址吗？

FB.api('/'+respone.id+'/picture',function(respone)
{
    $scope.imgSrc = respone.data.url;
});

查看

<img ng-src="{{ imgSrc }}" />

Answer 3

首先检查图像是否成功编码到base64中。我认同。现在在显示之前，只需将此“data：image / png; base64”添加到base64字符串即可。这是样本

在angularjs文件中

$scope.picValue="data:image/png;base64,"+base64String;

在html页面

<img ng-src="{{picValue}}" />

Angularjs下载图像和显示

3 个答案: