时间戳

首页 > 解决方案 > 新标签中的角度显示图像

html - 新标签中的角度显示图像

问题描述

我的页面上有一个轮播图像查看器我希望用户在单击图像时会在浏览器的新选项卡中打开该图像，我编写了下面的代码，但它下载图像而不是显示它。

组件.ts：

    openFile(url: string) {
    window.open(url, "_blank");
}

组件.html

<ss-lightslider-slide *ngFor="let image of images"
                        [attr.data-thumb]="image.value"
                        [attr.data-src]="image.value"
                        [attr.data-id]="image.id"
                        class="ss-asset-thumbnail">
        <img [src]="image.value" class="d-block w-100" title="{{image.name}}" alt="{{image.name}}" (click)="openFile(image.value)"/>
</ss-lightslider-slide>

我怎样才能让它在<img>标签上点击它时显示图像而不是下载它？

标签： htmlangularimage

解决方案

您可以创建一个窗口服务，并在单击图像时写下类似

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class WindRefService {
  constructor() {}
  getNativeWindow() {
    return window;
  }
}



 onView() {
      this.nativeWindow.open(image);
    
  }

您可能需要寻找 getNativeWindow() 用于您的案例

推荐阅读