Question

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

＆＃34;警告：清理不安全的URL值＆＃34;

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

<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字符串更好的解决方案。

如果有人遇到同样的问题，请检查plunker

中的base64图片是否正确

Answer 2

Paulo Botelho

只有http，https，ftp和mailto可以安全地在AngularJS中使用。 Angular将使用不安全的前缀列入非白名单的URL：base 64字符串也被视为不安全的URL，因为它不包含http或任何其他URL。

因此，如果您使用角度2或角度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">

我希望它会对你有所帮助。

使用来自数据库的base64图像离子填充缩略图

2 个答案: