Display an image whose url requires authentication

[hmsuchier]

Hi,
Is there a way to display images whose url requires authentication ? In a normal context I use a pipe to catch query and attach authentication token, but is there a way to do such thing with the current lib ?
Thanks !

[themyth92]

Short anwser, NO. I would suggest u can attach the auth token in the image url and let your server to return the image if the auth is correct

[oneplugin]

Use this component

@component({
selector: 'app-secured-image',
template: <img [src]="dataUrl$|async"/>
})
export class SecuredImageComponent implements OnInit {
@input() private attachment: Attachment = {};

private src$ = new BehaviorSubject(this.attachment);
private url :Observable = undefined

constructor(private httpClient: HttpClient, private domSanitizer: DomSanitizer) {}

ngOnInit(): void {}

ngOnChanges(): void {
this.src$.next(this.attachment);
}

dataUrl$ = this.src$.pipe(switchMap(attachment => this.loadImage(attachment)))

private loadImage(attachment: Attachment): Observable {
let params = {"id":attachment.id,"fileName":attachment.fileName,"objectPath":attachment.storagePath,"bucketName":"unknot"}
const httpOptions : Object = {
headers: new HttpHeaders({'Accept':'image/png'}),
responseType: 'blob'
};
this.url = this.httpClient.post(${environment.serverUrl}/file/download,JSON.stringify(params),httpOptions)
.pipe(map(e => this.domSanitizer.bypassSecurityTrustUrl(URL.createObjectURL(e)) as string))

return this.url

}
}

@ViewChildren('albumImages',{read: ElementRef}) albumImages!: QueryList

open handler
open(index){
const albumImages = [];
if( this.albumImages.length > 0 ){
for( const albumImage of this.albumImages){
const img = albumImage.nativeElement.querySelector("img")
if( img && img.src != undefined){
const santizedUrl = this.domSanitizer.bypassSecurityTrustUrl(img.src)
albumImages.push({
src: santizedUrl,
caption: "",
thumb: santizedUrl
})
}
this.lightbox.open(albumImages, index,{showImageNumberLabel:true,centerVertically:true,wrapAround:true,disableScrolling:true});
}
}
}

Works like charm