时间戳

首页 > 解决方案 > 通过单击按钮显示图像

angular - 通过单击按钮显示图像

问题描述

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

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

组件.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);
            });
}

组件.html

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

或者

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

我得到了那个例外

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

标签： angularspring-boot

解决方案

您可以声明如下函数以获取图像预览。我想你那里有 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"
    );
}

希望这可以帮助。

推荐阅读