Display an image in an Angular application using a secure URL

Question

Display an image in an Angular application using a secure URL

I am trying to return an image using a blob request in Angular and display it in the HTML.

I have implemented the following code:

<img [src]="ImageUrl"/>

This is the TypeScript code I am using:

private src$ = new BehaviorSubject(this.Url);
    dataUrl$ = this.src$.subscribe(url => {
        return this.imageService.GetImage(url, this.id).subscribe(data => {
            this.ImageUrl=data.changingThisBreaksApplicationSecurity;
            return data.changingThisBreaksApplicationSecurity
        })
    });

Here is my service implementation:

GetImage(url, id): Observable<any> {
    return this.httpClient
        .get(this.appConfig.apiEndpoint+ url + id, { responseType: 'blob' })
        .pipe(
            map(res => {
                if (res) {
                    return this.domSanitizer.bypassSecurityTrustUrl(URL.createObjectURL(res));
                }
                return null;
            })
        )
}

However, when I try to display the image in the HTML, it uses the following URL:

<img src="unsafe:blob:http://localhost:4200/6868babb-5ab2-491f-b519-2f2a3d0ed351">

But no image is displayed. What could be causing this issue? How can I resolve it?

javascript angular typescript

Answer 1

Answer №1

I encountered a similar issue, but managed to solve it by implementing the following:

For HTML:

<img [src]="transform(imageURI)" />

In TypeScript:

transform(url) {
   return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
 }

Answer 2

I encountered a similar issue, but managed to solve it by implementing the following:

For HTML:

<img [src]="transform(imageURI)" />

In TypeScript:

transform(url) {
   return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
 }

Answer 3

Answer №2

Here's a solution that worked for me and hopefully will work for you as well:

Within my component:

import { OnInit, ElementRef } from '@angular/core';

export class myComponent implements OnInit {
@ViewChild('myImage', { static: false }) private myImage: ElementRef

   ngOnInit() {
   }

   getMyImage(url: string): void {
    this.service.getImage(url)
        .subscribe(response =>
            this.myImage.nativeElement.src = window.URL.createObjectURL(response)
        )
   }
}

Within my service:

getImage(url: string): Observable<Blob> {
    return this.http.get(`${environment.api}/file/download/` + url, {responseType: 'blob'})
}

Within my HTML:

 <img #myImage>

Answer 4

Here's a solution that worked for me and hopefully will work for you as well:

Within my component:

import { OnInit, ElementRef } from '@angular/core';

export class myComponent implements OnInit {
@ViewChild('myImage', { static: false }) private myImage: ElementRef

   ngOnInit() {
   }

   getMyImage(url: string): void {
    this.service.getImage(url)
        .subscribe(response =>
            this.myImage.nativeElement.src = window.URL.createObjectURL(response)
        )
   }
}

Within my service:

getImage(url: string): Observable<Blob> {
    return this.http.get(`${environment.api}/file/download/` + url, {responseType: 'blob'})
}

Within my HTML:

 <img #myImage>

Display an image in an Angular application using a secure URL

Answer №1

Answer №2

Similar questions

Changing a complex array structure in javascript into a CSV format

Nesting two ngFor loops in Angular using the async pipe leads to consistent reloading of data

Button appears and disappears sporadically while browsing in Safari

What is the optimal method for generating numerous records across various tables using a single API request in a sequelize-node.js-postgres environment?

Recognizing when a Bootstrap dropdown with multiple options is deselected through Jquery

Angular UI Router allows for the resolution of data before a state

combining input fields for editing as a single unit instead of individually

Oops! The program encountered an error where it cannot assign a value to the 'id' property of an undefined object while trying to store a session in redis

The Issue of Double-Clicking on Table Cells in Internet Explorer 8

execute a function once an asynchronous function has finished running

Using ReactJS and JavaScript to transform an array into a fresh array

Supply additional parameters to the method decorator within an Angular component

Different ways to use jquery to move to the top of an overflow div

JavaScript does not recognize jsPDF

Remove option from MUI Autocomplete after it has been selected

Pattern without anything to duplicate

Incapable of acquiring the classification of the attribute belonging to the

What steps should I take to include a Follow - Unfollow Button on my Website?

Triggering blur event manually in Ionic 3

"Data is not defined" error message is triggered when using jQuery DataTable Row Details