使用异步管道设置图像源对象URL时如何防止图像闪烁

Question

我有一个JWT授权的图像端点，因此我们不能直接在HTML中链接到图像URL。

解决方法是使用异步管道加载具有正确授权的图像（通过HTTP拦截器实现，未显示），并将img.src属性设置为“对象” URL。

HTML：

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

管道：

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中所见，当图像从加号（静态）变为荷马大脑（通过此管道加载）时，会出现非常短暂的闪烁，同时显示经典的“图片未找到”和alt文本（Avatar）。

闪烁

我该如何防止这种闪烁？

更新：删除“alt”属性可消除“损坏的图片”图像，看起来更好。

因此，从这个方面来看：

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

转换为：

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

我将保持这个问题处于开放状态，因为可能有人必须使用alt属性，所以我的解决方案对他们来说无效。

- Pikabanga

---

因为当新的图像src被应用时，新的图像并没有完全加载。所以只有在从异步管道加载图像时才必须设置图像的src路径... - Developer

Answer 1

当您点击按钮并加载图片时，存在一个短时间框架，在此期间从服务器上没有完全加载图片，而 <img> 将显示 alt 文本。

为了防止这种情况，通过组件/服务从服务器下载图像，并在图像完全加载完成后仅设置 src。

- user13258211

---

我尝试在设置src之前等待承诺和图像完全加载，但是闪烁仍然存在。不过，我找到了一个让我满意的解决方案，通过删除alt标签（请参见更新的描述）。 - Pikabanga

@Pikabanga，当图像无法加载（无论是由于服务器错误还是网络连接缓慢）时，你的图像标签应该提供一个alt文本来显示。如果没有更多的代码信息，很难确定问题所在，但是除非你提供更多有关如何通过承诺获取图像以及何时设置src的信息，否则根本无法确定基本问题是否相同。 - user13258211