1) Create interceptor which sets authorization header
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
request = request.clone({
setHeaders: {
Authorization: `Bearer <your token>`
}
});
return next.handle(request);
}
}
Instead of <your token>
you should inject your AuthService into this interceptor, for example this.authService.getToken(), which loads token from local storage.
2) Implement “secure” pipe which gets image as blob and creates an object url of that blob that can be used in the src attribute
import { Pipe, PipeTransform } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import { Observable } from 'rxjs/Observable';
@Pipe({
name: 'secure'
})
export class SecurePipe implements PipeTransform {
constructor(private http: HttpClient, private sanitizer: DomSanitizer) { }
transform(url): Observable<SafeUrl> {
return this.http
.get(url, { responseType: 'blob' })
.map(val => this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(val)));
}
}
3) Use it
<img [attr.src]="'your link' | secure | async" />