Правильно санируйте <img>URL в угловых - PullRequest
Новая
       39

Правильно санируйте <img>URL в угловых

0 голосов
/ 26 июня 2019

Я ищу наилучший из возможных способов очистки URL-адреса изображения под углом.

В приложении пользователи могут предоставить URL-адрес изображения и просмотреть его, функция предварительного просмотра выполняет вызов на сторонний сервер, на котором размещено изображение, и делает изображение доступным в форме предварительного просмотра.

HTML 

<mat-form-field class="heavy-label">
    <input matInput placeholder="Custom Image Url" [ngModel]="blankScreenConfig.image.url"
        (ngModelChange)="setCustomImage($event)" />
    <mat-hint>http://example.com/someImage.jpg</mat-hint>
</mat-form-field>

<div class="background-preview" [ngStyle]="{'background-image': 'url(' + blankScreenConfig.image.src  + ')'}">
    <div class="overlay-text">{{blankScreenConfig.message}}</div>
</div>

TS 

 public setCustomImage(value: string): void {
        if (value.match(/\.(jpeg|jpg|gif|png)$/)) {
            const img = new Image({ name: value, url: this.domSanitizer.sanitize(SecurityContext.URL, value) });
            this.blankScreenConfig.image = img;
            this.handleChange();
        }
    }
enter code here

Это передало бы наши заголовки, установленные в перехватчиках. На вкладке сети img я вижу следующее для этого соответствующего запроса

Отображаются предварительные заголовки

...