Я пытаюсь перечислить изображения рядом со списком пользователей с удаленного сервера. Сервер защищен, поэтому я должен отправлять токен Jwt с каждым запросом. У меня есть перехватчик, который добавляет токен jwt с каждым запросом. Поэтому я использовал перехватчик в конвейере для аутентификации каждого изображения с помощью тега [src] следующим образом.
<img [src]="user.photo | authenticate | async" />
Нет ошибок, но отображается только крошечная граница для каждое изображение показывает, что изображение пустое.
Вот использование трубы в шаблоне:
<div class="media">
<img class="img-fluid circle" [src]="user.photo | authenticate | async" />
</div>
Вот мой канал Typescript:
import { HttpClient, HttpHeaders } from '@angular/common/http';
import 'rxjs/add/operator/map';
import { AuthService } from '../services/auth.service';
@Pipe({
name: 'authenticate'
})
export class AuthImagePipe implements PipeTransform {
constructor(
private http: HttpClient,
private authService: AuthService, // our service that provides us with the authorization token
) {}
async transform(src: string): Promise<string> {
console.log(src);
const token = this.authService.currentUserValue.token.accessToken;
const headers = new HttpHeaders({'Authorization': 'Bearer ' + token});
const imageBlob = await this.http.get(src, {headers, responseType: 'blob'}).toPromise();
const reader = new FileReader();
return new Promise((resolve, reject) => {
reader.onloadend = () => resolve(reader.result as string);
reader.readAsDataURL(imageBlob);
});
}
}