AngularJS - img ng-src转换为base64数据（而不是URL）无法正常工作。

Question

我将使用openfb-angular（Facebook API库）来获取me/picture。
返回的数据中，“url”包含Base64数据，这里是Facebook文档。

以下是我的代码： JS

OpenFB.get('/me/picture', {format: 'json'}).success(function (imgData)
        {
            $scope.main.user.imageData = imgData;
        });

HTML

 <img ng-src="data:image/jpg;base64,{{main.user.imageData}}">

它没有工作，我得到了一个空的img标签。

我的错误在哪里？

- cheziHoyzer

---

请粘贴任何imageData的样本。您是否检查了返回的图像格式？它是jpg吗？ 如果可能，请在Plunker中发布代码。就像我这里展示的一张图片 http://plnkr.co/edit/m24ZcYuttw6IuCBh02rQ?p=preview - sagar43

你尝试过只使用src而不是ng-src吗？ - dhavalcengg

应该使用 image/jpeg 而不是 image/jpg 吗？ - lvarayut

嗨@cheziHoyzer，我现在遇到了这个问题...你解决了base64图像的问题吗？谢谢。 - VaroX

Answer 1

像这样使用ng-source指令：

<img ng-src="{{'data:image/png;base64,'+main.user.imageData}}" >

希望这能有所帮助。

- Manuel Eguiluz

Answer 2

使用 data-ng-src 指令，像这样：<img data-ng-src="{{data.image_url}}">。

在你的控制器中将 base64 字符串设置为这样：$scope.data.image_url=<你的 base64 图片来源>

希望这能帮到你！

- Bipin Bhandari

Answer 3

<img data-ng-src="data:image/png;base64,{{main.user.imageData}}"/>

希望这有所帮助。

- Srikanth

Answer 4

在 Angular 7 中，这将是：

- kbpontius