фоновое изображение не отображается в Angular - PullRequest
Новая
       59

фоновое изображение не отображается в Angular

0 голосов
/ 08 октября 2019

Да, я искал и нашел много примеров, но ни один не помог мне. Я не уверен, что я делаю не так. Нужна помощь!

Я могу видеть изображение, если я добавлю тег <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})`);
              });
  }

enter image description here

Ответы [ 3 ]

0 голосов
/ 08 октября 2019

если вы попытаетесь установить фоновое изображение с помощью CSS? как это: 

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

}

В шаблоне вы можете использовать привязку, чтобы установить класс CSS как вам нравится

0 голосов
/ 08 октября 2019

Работает нормально, когда я попробовал ваш stackblitz . Вам нужно исправить CSS, чтобы изображение отображалось при просмотре.

Не используйте bypassSecurityTrustUrl для URL-адреса стиля. Таким образом, приведенная ниже миниатюра недействительна: 

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

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

Попробуйте настроить CSS позицию для вашего изображения, и оно будет отображаться: 

<div class="row" 
  style="width: 100%; height: 100%; position:absolute; 
  margin-left: 1px;  background-repeat: no-repeat;" 
  [style.background-image]="image"> </div>
0 голосов
/ 08 октября 2019

Вы можете просто поместить изображение URL на src, даже если оно на base64 

 <img id="dashboardImage" [src]='objectURL' height='500' width='500' />
...