Angular 在按钮单击时显示/隐藏图像

Question

在我的代码中，我试图在单击按钮时通过链接显示和隐藏图像。 现在，当我单击按钮时，图像会在 Chrome 的不同选项卡中打开。 但我想在我的应用程序页面中显示它。 我需要将链接分配给 TypeScript 以便稍后进行一些更改，但我无法弄清楚。 我怎样才能做到这一点？

HTML：

<button mat-button matRipple class="purple-500 fuse-white-fg mr-12" (click)="imageSource()">Display</button>

TS：

    imageSource(){
window.open("http://api.labelary.com/v1/printers/8dpmm/labels/4x6/0/^xa^cfa,50^fo100,100^fdHello World^fs^xz");
    }

Answer 1

但是，不幸的是，您不能只显示这样的图像。 更多信息在这里。

以下是如何根据按钮单击显示图像的方法。

<button mat-button matRipple class="purple-500 fuse-white-fg mr-12"; (click)="imageSource()">Display</button>
<img [src]="url" *ngIf="hidden" />

---

let hidden = false;
let url = "http://api.labelary.com/v1/printers/8dpmm/labels/4x6/0/^xa^cfa,50^fo100,100^fdHello World^fs^xz"

imageSource(){
    this.hidden = !this.hidden;
}