Да, я искал и нашел много примеров, но ни один не помог мне. Я не уверен, что я делаю не так. Нужна помощь!
Я могу видеть изображение, если я добавлю тег <img>
, но не когда я поставлю как background-image
. Но я могу видеть двоичное изображение, когда проверяю элемент.
Попытка сделать пример в stackblitz https://stackblitz.com/edit/display-image-from-rest-api-qpnspq?embed=1&file=src/app/app.component.ts
HTML:
<!-- This works -->
<div class="row" style="max-width: 100%; margin-left: 1px;" >
<img id="dashboardImage" [src]='imageBlobDataUrl' height='500' width='500' />
</div>
<!-- This does NOT works -->
<div class="row" style="max-width: 100%; margin-left: 1px;" [style.background-image]="image"> </div>
TS:
@Input() imageBlobDataUrl: any;
selectedImage: QiImage = new QiImage();
public header:SafeHtml;
public content:SafeHtml[];
public image:SafeStyle;
constructor(
private qiImageService: QiImageService,
private sanitizer: DomSanitizer,
private imageService: ImageService
) {}
populateImageDetails(lineId, bitmapFileName) {
this.imageService
.populateImageDetails(lineId, bitmapFileName)
.subscribe( (selectedImage : any) => {
this.selectedImage = selectedImage;
//let TYPED_ARRAY = new Uint8Array(selectedImage.imageData);
//const STRING_CHAR = String.fromCharCode.apply(null, TYPED_ARRAY);
//let base64String = btoa(STRING_CHAR);
let objectURL = 'data:image/png;base64,' + selectedImage.imageData;
this.imageBlobDataUrl = this.sanitizer.bypassSecurityTrustUrl(objectURL);
this.image = this.sanitizer.bypassSecurityTrustStyle(`url(${objectURL})`);
});
}