css - image de fond ne s'affiche pas dans Angular

Oui, j'ai cherché et trouvé de nombreux exemples, mais aucun n'a fonctionné pour moi. Je ne suis pas sûr de ce que je fais de mal. J'ai besoin d'aide !

Je peux voir l'image si je mets la balise <img>, mais pas quand je la mets comme background-image. Mais je peux voir l'image binaire quand je fais inspecter l'élément.

J'ai essayé de faire un exemple sur 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})`);
              });
  }

Réponse #1

Cela fonctionne bien lorsque j'ai essayé votre stackblitz. Vous devez corriger le CSS pour que l'image s'affiche à l'écran.

Ne pas utiliser bypassSecurityTrustUrl pour l’URL de style. Donc ce qui suit pour la miniature n’est pas valide :

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

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

Essayez d'ajuster la position CSS de votre image et elle apparaîtra :

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

Réponse #2

si vous essayez de définir l'image de fond en utilisant CSS ? comme ceci :

.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;

}

Dans le modèle, vous pouvez utiliser la liaison pour définir la classe CSS comme vous le souhaitez