AngularJS - img ng-src 到 base64 数据（不是 url）不起作用答案

【问题标题】：AngularJS - img ng-src to base64 data (not url) not workingAngularJS - img ng-src 到 base64 数据（不是 url）不起作用
【发布时间】：2019-01-15 05:21:57
【问题描述】：

我正在使用openfb-angular（Facebook API 库）来获取 me/picture。
返回数据为“url”，包含Base64数据here is the facebook documentation。

这是我的代码：

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 标签。

我的错误在哪里？

【问题讨论】：

请粘贴任何 imageData 样本。您是否检查了您要返回的图像格式？是jpg吗？如果可能，请在 Plunker 中发布代码。就像我在这里展示了一张图片plnkr.co/edit/m24ZcYuttw6IuCBh02rQ?p=preview
你试过只使用 src 而不是 ng-src 吗？
应该是image/jpeg而不是image/jpg？
嗨@cheziHoyzer，我现在正面临这个问题......你解决了base64图像的问题吗？谢谢

标签： javascript angularjs facebook facebook-graph-api base64

【解决方案1】：

像这样使用 ng-source 指令：

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

希望这会有所帮助。

【讨论】：

【解决方案2】：

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

在您的控制器中将 base64 字符串设置为： $scope.data.image_url=<your base64 image source>

希望这会有所帮助！

【讨论】：

【解决方案3】：

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

希望这会有所帮助。

【讨论】：

【解决方案4】：

在 Angular 7 中，这将是：

<img [src]="'data:image/png;base64,' + main.user.imageData" />

【讨论】：