css - gambar latar belakang tidak muncul di Angular

Ya, saya sudah mencari dan menemukan banyak contoh, tetapi tidak ada yang berhasil untuk saya. Saya tidak yakin apa yang salah dengan yang saya lakukan. Butuh bantuan!

Saya bisa melihat gambarnya jika saya menaruhnya di tag <img>, tetapi tidak ketika saya menaruhnya sebagai background-image. Tapi saya bisa melihat gambar biner ketika saya memeriksa elemen.

Mencoba membuat contoh di 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})`);
              });
  }

Jawaban #1

Ini bekerja dengan baik ketika saya mencoba stackblitz Anda. Anda perlu memperbaiki CSS agar gambar bisa ditampilkan di tampilan.

Jangan gunakan bypassSecurityTrustUrl untuk Style Url. Jadi kode di bawah ini untuk thumbnail tidak valid:

this.thumbnail = this.sanitizer.bypassSecurityTrustUrl(objectURL); // Do NOT Use

this.image = this.sanitizer.bypassSecurityTrustStyle(`url(${objectURL})`); // This works fine and is Valid

Cobalah untuk menyesuaikan posisi CSS pada gambar Anda dan itu akan muncul:

<div class="row" 
  style="width: 100%; height: 100%; position:absolute; 
  margin-left: 1px;  background-repeat: no-repeat;" 
  [style.background-image]="image"> </div>

Jawaban #2

jika Anda mencoba mengatur gambar latar belakang menggunakan CSS? seperti ini:

.bg {
  background-image: url("../../yourimage");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;

}

Di dalam template Anda dapat menggunakan binding untuk mengatur kelas CSS sesuai keinginan Anda

Artikel terkait