Display an image by clicking on button

Question

I'm trying to display an image on new window after clicking on button.

However, some time, that cannot be done.

Component.ts

displayMyImage()
    {
    this.http.get(this.imagePath, {observe: 'response', responseType: 'blob'}).pipe(map(res =>
            {
               return new Blob([res.body], {type: res.headers.get('Content-Type')});
            })).subscribe(hi =>
            {
                const xx = URL.createObjectURL(hi);
                window.open(xx);
            });
}

Component.html

<span (click)='displayMyImage()'>Display</span>

or

<button (click)="displayMyImage()">Display</button>

I got that exception

Could you please tell me what I missed ?. Big thanks.

Does this answer your question? [Open image in new window](https://stackoverflow.com/questions/8908022/open-image-in-new-window) — Chintan Joshi, Mar 16 '20 at 09:12
Hello Sir @ChintanJoshi, thanks a lot for your replay. I tried the correct answer of your proposed thread and that didn't worked for me knowing that the value of **largeImage** is `../assets/upload/Ordinaryespdsi2019o4f8dh1584349128317.jpg`. Have you please any idea about solving that?. Big Thanks. — Sarsoura, Mar 16 '20 at 10:02
If I used **staticPath** as `` --> It worked as well. But if I used **dynamicPath** like `` --> That doesn't worked, **knowing that** the value of **saria2020** is `../assets/upload/Ordinaryespdsi2019o4f8dh1584349128317.jpg` presented on **component.ts** like that `saria2020() : String{return this.specialUser.displayPathImage;}` — Sarsoura, Mar 16 '20 at 10:16

score 0 · Answer 1 · answered Mar 16 '20 at 09:09

0

Maybe something like that would help.

document.getElementById('bigpic').style.display='block';

answered Mar 16 '20 at 09:09

Kryniow

5
4

score 0 · Answer 2 · answered Mar 16 '20 at 10:13

0

You can declare function as below to get image-preview. I suppose that you have imagePath there.

displayMyImage() {

    var imagePath = "https://www.howtogeek.com/wp-content/uploads/2018/06/shutterstock_1006988770.png";
    window.open(
      imagePath,
      "Image",
      "width=largeImage.stylewidth,height=largeImage.style.height,resizable=1"
    );
}

Hope this helps.

answered Mar 16 '20 at 10:13

Chintan Joshi

1,207
1
9
17

If I used **staticPath** as `` --> It worked as well. But if I used **dynamicPath** like `` --> That doesn't worked, **knowing that** the value of **saria2020** is `../assets/upload/Ordinaryespdsi2019o4f8dh1584349128317.jpg` presented on **component.ts** like that `saria2020() : String{return this.specialUser.displayPathImage;}` – Sarsoura Mar 16 '20 at 10:19
So my problem is with dynamic path. I can't know how solving that ?. – Sarsoura Mar 16 '20 at 10:21
Are you getting dynamicPath as URL or static path ? – Chintan Joshi Mar 16 '20 at 10:23
still not working Sir, using **static path**, I can display the image with url `localhost:4300/assets/upload/Ordinaryespdsi2019o4f8dh1584349128317.jpg`, but using **dynamicPath** with {{saria2020}} instead {{saria2020()}} I got nothing with url `localhost:4300/null` – Sarsoura Mar 16 '20 at 10:25
the **dynamicPath** id a dynamic path . It is the result of `saria2020() : String{return this.specialUser.displayPathImage;}` which is `../assets/upload/Ordinaryespdsi2019o4f8dh1584349128317.jpg` – Sarsoura Mar 16 '20 at 10:27
Sorry, I am not able to understand, whether you want to test static-path or dynamic path ? – Chintan Joshi Mar 16 '20 at 10:27
My **only** problem is with **dynamicPath** – Sarsoura Mar 16 '20 at 10:28
By dynamicPath, you meant to say Image_URL or image from your local ? – Chintan Joshi Mar 16 '20 at 10:29
That exactly what I did Sir, I used in **component.ts**, the function `saria2020() : String{return this.specialUser.displayPathImage;}` which returns `../assets/upload/Ordinaryespdsi2019o4f8dh1584349128317.jpg` (exists on my local) – Sarsoura Mar 16 '20 at 10:32
Should be path issue. See this example I have editted on stackblitz here. https://stackblitz.com/edit/angular-assets-image-test-ep3dsy – Chintan Joshi Mar 16 '20 at 10:45
Thanks Sir it works as well when I specify the pathImage, but when I made it as dynamic like `getLocalImage() { this.specialUser.displayPathImage; }`, I can't show the image. knowing that **specialUser** is defined like that: `var requestb = new XMLHttpRequest(); requestb.open('GET', 'http://localhost:6227/api/auth/users/' + this.usrId, false); requestb.send(null); this.specialUser = JSON.parse(requestb.responseText);` – Sarsoura Mar 16 '20 at 12:29

Display an image by clicking on button

2 Answers2