Using Blob or SafeResourceUrl images

[default23]

Hello, i'm stuck with displaying images with SafeResourceURL or Blob images, i don't have a direct link to the image like 'https://example.com/image.png', because i need to get an image from the API using several headers in the request

Please leave an example or describe how can i show gallery with that images

[lukasz-galka]

Hi @default23, could you give me more info or maybe some example? Could you give me maybe example with simple html img?

[default23]

Hi, i'm receive images from the API with method like this

getFile(fileName, id): Observable<Blob> {

        return Observable.create((obs: Observer<Blob>) => {

            const token: string     = localStorage.getItem(JWT);
            const xhr: XMLHttpRequest = new XMLHttpRequest();
            xhr.responseType        = 'blob';

            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    xhr.status === 200 ? obs.next(xhr.response) : obs.error(null);
                    obs.complete();
                }
            };

            xhr.open('GET', `${PROXY_MANAGER}/files/${id}/${fileName}`, true);
            xhr.setRequestHeader('Authorization', 'Bearer ' + token);
            xhr.send(null);
        });
    }

And then, i'll create SafeResourceUrl for that blob, because Angular are throw security error for this blob. I'm using this method to avoid this error

 private _createImageUrl(image: Blob): SafeResourceUrl {

        return this._sanitizer.bypassSecurityTrustResourceUrl(
            URL.createObjectURL(image)
        );
}

And finally i'm getting the all images of SafeResourceUrl type, it have a link inside like

blob://localhost.....

In the HTML it looks like

<img [src]="remoteFile">

[lukasz-galka]

Hi @default23, in version 1.1.1 I have updated NgxGalleryImage and now is suporting SafeResourceUrl https://github.com/lukasz-galka/ngx-gallery#ngxgalleryimage

I have also added example in demo https://lukasz-galka.github.io/ngx-gallery-demo/#images-as-saferesourceurl

Please let me know if it helps.

[default23]

Ok @lukasz-galka , thanks a lot! 👍 I'll leave a feedback later

[default23]

@lukasz-galka

This warning appears again

WARNING: sanitizing unsafe style value url(SafeValue must use [property]=binding: blob:http://localhost:4200/6afc3ae1-ab7a-481e-b4f7-16481b0dc86c (see http://g.co/ng/security#xss)) (see http://g.co/ng/security#xss).

For the testing purposes i load files via this business logic

loadImageFiles() {

        const id = this.driver.id;
        this.driver.driverFiles
            .forEach(file => this._driverService.getDriverFile(id, file.name)
                .subscribe((res: Blob) => 

                     this.galleryImages.push({
                        small : this._fileHelper.createImageUrl(res),
                        medium: this._fileHelper.createImageUrl(res),
                        big   : this._fileHelper.createImageUrl(res)
                    });
                }));
    }

// fileHelper.ts

createImageUrl(image: Blob): SafeResourceUrl {
        return this._sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(image));
}

I think this images are not render because you need to use the bypassSecurityTrustStyle method (DomSanitizer) before you use an image in the HTML

ngx-gallery-image.component.html

 [style.background-image]="'url(' + image + ')'"

Issue like that on stackoverflow

[lukasz-galka]

Yes, but there is a problem because bypassSecurityTrustStyle requires string and you are using SafeResourceUrl. I will read about it.

[lukasz-galka]

I know that it is probably to late, but I fixed this in version 1.1.7

[default23]

@lukasz-galka when i'll back to my project i will check this! Thank you