pulimurukan Ответов: 1

Изображение Base64 поступает в [src], но не рендерится в пользовательском интерфейсе angular 2

i am binding a base64 image to the UI.which is in a loop.but image is not binding,while inspect element i can c the image but not rendering

БД не возвращается 
data:image/jpg;base64,
поэтому я добавил в html

пока осматриваю еленмент я получаю
"data:image/jpeg;base64,/9j/4A
но это не рендеринг.Есть Идеи????

Что я уже пробовал:

<pre><td>
<span>{{ m.Name }}</span>
</td>
<td>
<!--<img style="width:100px;height:100px" [src]="imageData1">-->
<img [src]="'data:image/jpg;base64,'+m.ImageData" style="height:50px;width:50px" />
</td>
<td>
<span>{{m.Age }}</span>

Richard Deeming

Это буквально что вы видите в инструментах разработчика? /9j/4A это не допустимая строка Base64, поэтому неудивительно, что вы не видите изображения!

Что там внутри m.ImageData?

pulimurukan

"данные: изображение / jpeg;base64,/9j/4A----------здесь, когда я переместил курсор, я вижу изображение, но не рендеринг в пользовательский интерфейс.

"М" означает пусть M-массива, т. е.; м.название,м. изображения

1 Ответов

Рейтинг:
8

Jameel VM

Воспользуйся _sanitizer.bypassSecurityTrustUrl чтобы сказать, что значение углового src безопасно

Вы можете изменить свой код, как показано ниже.

Импорт Домсанитайзера

import { DomSanitizer } from '@angular/platform-browser';


Внедрите эту зависимость в контруктор
constructor(private domSanitizer: DomSanitizer) { }


myReader.onloadend = (e) => {
     this.base64Image = domSanitizer.bypassSecurityTrustUrl(myReader.result);
     console.log(this.base64Image);
   }

Robert Everett

Это не работает:
DomSanitizer.bypassSecurityTrustUrl(строка) принимает только строки

Lahiru Gambheera

Сработало...! Большое спасибо