Как разрешить предупреждение url sanitizer в угловых? - PullRequest
Новая
       48

Как разрешить предупреждение url sanitizer в угловых?

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

У меня есть этот вызов внутри моего HTML-файла:

profile.html 

<div mat-card-avatar *ngIf="imgResult" [ngStyle]="{ 'background-image': 'url(' + imgResult + ')' }" class="avatar">
  <mat-icon *ngIf="!imgResult">person</mat-icon>
</div>

Мой компонент выглядит так:

profile.component.ts 

import { DomSanitizer } from '@angular/platform-browser';

... 

  picture: File;
  imgResult: any;

... 

constructor(
    private sanitizer: DomSanitizer
  ) { }

... 

  onChange(event) {
    this.picture= event.target.files[0];
    const reader = new FileReader();
    reader.readAsDataURL(this.picture);
    reader.onload = (ev: any) => {
      this.imgResult = ev.target.result;
      return this.sanitizer.bypassSecurityTrustUrl(this.imgResult);
    };
  }

Загрузка изображения работает, как и ожидалось, но я не могу остановить предупреждение sanitizing unsafe URL value.

Как я могу это сделать?

1 Ответ

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

Вы используете дезинфицирующее средство правильно, но не используете значение результата. Попробуйте вместо этого: 

reader.onload = (ev: any) => {
  const trustedUrl = this.sanitizer.bypassSecurityTrustStyle(`url(${ev.target.result})`);
  this.imgResult = trustedUrl;
};

И используйте вместо этого в html-файле: 

[style.background-image]="imgResult"

В этом разделе уже дан ответ на этот вопрос: ВНИМАНИЕ: очистка URL-адреса небезопасного стиля

...