通过单击按钮显示图像

Question

单击按钮后，我正在尝试在新窗口上显示图像。

但是，有些时候，这是无法做到的。

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> 

或

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

我收到了that exception

你能告诉我我错过了什么吗？非常感谢。

Answer 1

也许这样会有所帮助。

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

Answer 2

您可以声明如下函数来获取图像预览。我想你那里有 imagePath。

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"
    );
}

希望这会有所帮助。