Ionic 使用数据库中的 base64 图像填充缩略图答案

【问题标题】：Ionic populating thumbnails with base64 images from a databaseIonic 使用数据库中的 base64 图像填充缩略图
【发布时间】：2018-07-09 03:17:20
【问题描述】：

所以我有一个 Patient 类型的对象，它从数据库中获取它的值并获取一个 base64 图像以用作头像，但到目前为止，列表正确显示，没有图像，我的控制台日志给了我：

“警告：清理不安全的 URL 值”

到目前为止，我的代码是这样的：

<ion-list danger>
<ion-item-sliding *ngFor="let patient of patientsList">

       <ion-avatar item-left>
         <img src="data:image/png;base64,{{patient.photo}}">
       </ion-avatar>

        <ion-item (click)="openPage(patient)">
            {{patient.name}}
        </ion-item>


        <ion-item-options>

        <button round (click)="editPatient(patient)" light>
        <ion-icon name="paper"></ion-icon>
        </button>

        <button (click)="deletePatient(patient)">
        <ion-icon name="trash"></ion-icon>
        </button>

        </ion-item-options>

</ion-item-sliding>
</ion-list>

有人知道我做错了什么吗？

【问题讨论】：

我个人也在做同样的事情（尽管在数据库中存储 base64 编码的图像并不是最好的解决方案）。但我像这样绑定到[src]：[src]="'data:image/jpeg;base64,'+participant.base64image" ，这不会引发错误/警告
我想我应该尝试将它们转换为 JPG，然后这样做可能是一个可能的解决方案，而不是处理这么大的 URL
是的，但是（大多数情况下）要求您的图片可以公开访问，这取决于您使用它们的目的是否会成为问题
嗯，它是一个用于医疗目的的应用程序，带有本地存储，它甚至不会上线，所以我认为它不会有任何区别，因此我为什么要放弃安全措施。
你描述的实际工作方式错误没有显示，但图像仍然没有显示任何想法？

标签： angular base64 ionic2 sanitization

【解决方案1】：

我在我的项目中使用了同样的东西。在那里我绑定到[src]，如下所示：[src]="'data:image/jpeg;base64,'+participant.base64image"

虽然，对于存储而言，将base64 图像转换为普通图像并从后端提供它们将是比存储base64 图像更好的解决方案。（它们很大）。除非这会带来安全风险，否则还有比存储base64 字符串更好的解决方案。

如果有人遇到同样的问题，请检查您的base64 图像在此plunker 中是否正确

【讨论】：

【解决方案2】：

保罗·博特略

只有 http、https、ftp 和 mailto 可以在 AngularJS 中安全使用。 Angular 会在未列入白名单的 URL 前加上 unsafe: 前缀，并且 base 64 字符串也被认为是不安全的 url，因为它不包含 http 或其他任何内容。

因此，如果您使用的是 angular 2 或 angular 4，那么您可以添加以下代码。

import {DomSanitizer} from '@angular/platform-browser';
...
constructor(private sanitizer:DomSanitizer){}
...
let sanitizedUrl = this.sanitizer.bypassSecurityTrustUrl('data:image/png;base64,'+patient.photo)

然后在你的html文件中添加这个

<img src="sanitizedUrl">

希望对你有帮助。

【讨论】：

你让我开心