Images downloaded from server are not rendering on deploy

Viewed 17

On localhost it works, on the deployed version - it doesn't. Get image request:

public getImage(imageUrl: string): Observable<Blob> {
    return this.http.get(imageUrl, {
        responseType: 'blob',
        headers: this.getHeaders(),
    });
}

Then I use the function, which creates URL:

 public createImageFromBlob(slug: string, image: Blob): Observable<boolean> {
        const reader = new FileReader();

        this.photos.set(slug, '');

        reader.addEventListener(
            'load',
            () => {
                this.photos.set(slug, reader.result);
                return of(true);
            },
            false,
        );

        if (image) {
            reader.readAsDataURL(image);
        }

        return of(false);
    }

And display image

<div
    class="image-container"
    [ngStyle]="{
        'background-image': imageSrc ? 'url(' + imageSrc + ')' : ''
    }"
>
</div>

On localhost I get this and it renders.

background-image: url(data:application/force-download;base64,UklGRso........Url

But on deployed version URL has different type:

background-image: url(data:text/html;base64,PCFEasdg980asdgT......URL);

Why is this happening and what should I do?

0 Answers
Related