Búsqueda de sitios web

css - la imagen de fondo no se muestra en Angular

Sí, busqué y encontré muchos ejemplos, pero ninguno funcionó para mí. No estoy seguro de qué estoy haciendo mal. ¡Necesito ayuda!

Puedo ver la imagen si pongo la etiqueta <img>, pero no cuando la pongo como background-image. Pero puedo ver la imagen binaria cuando inspecciono el elemento.

Intenté hacer un ejemplo en 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})`);
              });
  }

Respuesta #1

Funciona bien cuando probé tu Stackblitz. Necesitas arreglar el CSS para que la imagen se muestre en la vista.

No use bypassSecurityTrustUrl para la URL de estilo. Así que lo siguiente para la miniatura no es válido:

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

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

Intenta ajustar la posición CSS de tu imagen y aparecerá:

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

Respuesta #2

¿si intentas establecer la imagen de fondo usando CSS? así:

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

}

En la plantilla puedes usar el enlace para establecer la clase CSS como desees

Artículos relacionados