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

Question

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

"WARNING: sanitizing unsafe URL value"

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

<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>

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

Answer 1

我在我的项目中使用同样的东西。我像这样绑定到 [src]：[src]="'data:image/jpeg;base64,'+participant.base64image"

尽管如此，对于存储而言，将 base64 图像转换为普通图像并从后端提供它们是比存储 base64 图像更好的解决方案。（它们很大）。除非这会带来安全风险，但话又说回来，有比存储 base64 字符串更好的解决方案。

如果有人遇到同样的问题，请检查您base64图像在这个plunker

中是否正确

Answer 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">

希望对你有所帮助

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

Ionic populating thumbnails with base64 images from a database

base64

sanitization

ionic2

angular