离子从数据库填充使用Base64图像的缩略图

所以我有一种病人从数据库中获取其价值，并得到作为头像使用的base64图像，但到目前为止与没有图像正确显示列表中的对象，我的控制台日志给我：离子从数据库填充使用Base64图像的缩略图

“警告：消毒不安全的网址值”

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

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

任何人都知道我做错了什么？

来源

2016-12-14 Paulo Botelho

我个人也是这样做的（尽管在你的数据库中存储base64编码图像不是最好的解决方案）。但我绑定到'[src]'就像这样：'[src] =''data：image/jpeg; base64，'+ participant.base64image“'这不会引发错误/警告 – Ivaro18

我想我应该尝试将它们转换为JPG，然后这样做可能是一个可能的解决方案，而不是处理如此大的URL –

是的，但（大部分时间）要求您的图像公开访问，取决于您使用它们的内容，如果这变成一个问题或不 – Ivaro18

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

虽然，对于存储base64图像转换为正常图像，并从你的后台服务他们会比存储base64图像更好的解决方案。（他们非常大）。除非这会带来安全风险，但是再次出现这种情况，有比存储base64字符串更好的解决方案。

如果有人也面临同样的问题，请检查您是否base64图像是正确的这一plunker

来源

2016-12-15 14:29:40 Ivaro18

保罗·博特略

只有http，https，ftp和mailto是安全的AngularJS使用。 Angular会将一个未列入白名单的网址加上不安全的前缀：而base 64字符串也被认为是不安全的网址，因为它不包含http或任何其他网址。

所以，如果你正在使用角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">

我希望这会帮助你。

来源

2017-12-08 12:43:51

离子从数据库填充使用Base64图像的缩略图

回答

相关问题