How to Render image from backend server as byte array to HTML DIV style background-image in Angular framework?

Question

I am trying as follows

app.component.ts

import { Component } from '@angular/core';
import { ConfigService } from './config.service';
import { SettingsService } from './settings.service';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Test display image';
  imgbytData: any;
  imageBytes: Uint8Array;
  backgroundimg: any;

  constructor(private sanitizer: DomSanitizer
  ) {}

  ngOnInit() {
    this.config.getData().subscribe((baseImage: any) => {

      this.backgroundimg = this.sanitizer.bypassSecurityTrustUrl('data:image/jpeg;base64,' + baseImage.backgroundimg);
      this.imageBytes = new Uint8Array(baseImage.image);

      const base64String = btoa(String.fromCharCode(baseImage.image));
      this.sampleimg = `url(data:image/jpeg;base64,${base64String})`;
      console.log(this.sampleimg);
    });
  }
}

app.component.html

<hello name="{{ name }}"></hello>
<img id="myimage" [src]="backgroundimg" width="100px" height="70px"/>

<div  [style.background-image]="sampleimg">
  This is new DIV Tag  
</div>

config.json file contains hard coded JSON data for image byte array.

The problem is with <Img> tag it is rendering, but while using in style tag, it is not showing image data.

I kept in same project, if can see in the image. for now testing purpose kept very simple, plan is to next integrate it with backend API — Dnyaneshwar Jadhav
– Dnyaneshwar Jadhav, Commented Apr 2, 2023 at 13:39

DEV · Accepted Answer · 2023-04-02 14:17:44Z

You can play with CSS to get right size :

HTML

<hello name="{{ name }}"></hello>

<div [style.background-image]="'url(' + myImage + ')'"></div>

CSS :

p {
  font-family: Lato;
}

div {
  height: 500px;
  width: 500px;
}

TS :

import { Component } from '@angular/core';
import { ConfigService } from './config.service';
import { SettingsService } from './settings.service';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Test display image';
  myImage;

  constructor(
    private config: ConfigService,
    public setting: SettingsService,
    private sanitizer: DomSanitizer
  ) { }

  ngOnInit() {
    this.config.getData().subscribe((baseImage: any) => {
      this.myImage = 'data:image/jpeg;base64,' + baseImage.backgroundimg;
    });
  }

}

Collectives™ on Stack Overflow

How to Render image from backend server as byte array to HTML DIV style background-image in Angular framework?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related