데이터베이스에서 base64 이미지로 이미지를 채우는 이오닉

Question

환자의 유형은 데이터베이스에서 해당 값을 가져오고 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> 

,691 : "경고 : 위생 안전하지 않은 URL 값"

내 코드는 지금까지 내 콘솔 로그를 줘

아무도 내가 뭘 잘못하고 있는지에 대한 단서를 가지고 있습니까?

Answer 1

내 프로젝트에서 같은 것을 사용하고 있습니다. 거기에 내가 지금처럼 [src] 바인딩 : [src]="'data:image/jpeg;base64,'+participant.base64image"

일반 이미지에 base64 이미지를 변환하여 base64 이미지를 저장보다 더 나은 솔루션이 될 것 백엔드에서 그들을 제공하는 스토리지, 비록. (그들은 꽤 큽니다). 이것이 보안 위험을 제기하지 않는 한 다시, base64 문자열을 저장하는 것보다 나은 해결책이 있습니다.

사람이 같은 문제에 직면하면 base64 이미지에 맞는지 확인이 plunker

Answer 2

파울로 Botelho

만 http, https, ftp 및 mailto는 AngularJS와에서 안전하게 사용할 수 있습니다. Angular는 허용되지 않은 URL에 안전하지 않은 접두사를 붙입니다. base 64 문자열은 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"> 

추가 할 수 있습니다.