Предотвращение мерцания изображения при установке URL-адреса объекта img sr c в asyn c pipe

Question

У меня есть авторизованная конечная точка JWT для изображений, поэтому мы не можем напрямую связываться с URL-адресами изображений в html.

Обходной путь должен иметь этот асин * c канал, который загружает изображение с правильной авторизация (через перехватчик http, не показан) и устанавливает для атрибута img.sr c URL-адрес «object».

HTML:

<img [attr.src]="environment.apiUrl + 'users/image/' + userId | secureImage | async" alt="Avatar" />

Pipe:

import { Pipe, PipeTransform } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Pipe({
    name: 'secureImage'
})
export class SecureImagePipe implements PipeTransform {

    constructor(private http: HttpClient, private sanitizer: DomSanitizer) { }

    transform(url): Observable<SafeUrl> {
        return this.http
            .get(url, { responseType: 'blob' })
            .pipe(map(val => this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(val))));
    }
}

Как вы можете видеть в этом GIF, когда изображение меняется со знака плюс (stati c) на мозг Гомера (загружается через эту трубу), там очень короткое мерцание, где оно показывает classi c "изображение не найдено" вместе с альтернативным текстом (Аватар).

Мерцание

Как я могу предотвратить это мерцание?

ОБНОВЛЕНИЕ: Удаление атрибутов "alt" удаляет изображение "испорченного изображения", которое выглядит намного лучше.

Итак, из этого:

<img [attr.src]="environment.apiUrl + 'users/image/' + userId | secureImage | async" alt="Avatar" />

до этого:

<img [attr.src]="environment.apiUrl + 'users/image/' + userId | secureImage | async" />

Я держу этот вопрос открытым, так как могут быть люди, которые должны иметь атрибут alt, поэтому мое решение не будет работать для них.

Answer 1

Когда вы нажимаете кнопку и загружаете изображение, появляется короткий промежуток времени, в течение которого изображение загружается не полностью с сервера, и отображает альтернативный текст.

Чтобы предотвратить это загрузите изображение с сервера через компонент / службу и установите sr c только после полной загрузки изображения.