Ионные населяющие миниатюры с base64 изображениями из базы данных

У меня есть объект типа Patient, который получает его значения из базы данных и получает изображение base64 для использования в качестве аватара, но пока список отображается правильно, без изображений и мои журналы консоли дают мне:Ионные населяющие миниатюры с 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>

У кого-нибудь есть ключ к тому, что я делаю неправильно?

источник

2016-12-14 Paulo Botelho

Я лично делаю то же самое (хотя хранение изображений с кодировкой base64 в вашей базе данных не является лучшим решением). Но я привязался к '[src]' следующим образом: '[src] =" 'data: image/jpeg; base64,' + member.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. Угловой будет префикс неберизованного URL-адреса с небезопасным: и базовая 64-строка также считается небезопасным URL-адресом, поскольку она не содержит 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 изображениями из базы данных

ответ

Смежные вопросы