时间戳

首页 > 解决方案 > Angular中是否有代码来显示要显示为大图像的选定图像

angular - Angular中是否有代码来显示要显示为大图像的选定图像

问题描述

我的图像已经显示得很小，如果单击该图像，我希望该图像显示为较大的图像。 <div class="main-image" [innerHTML]="item.largeImages[0] | displayImage:'product-image'"></div>

较小的图像显示为 <div *ngIf="!first" class="small-image [innerHTML]="image | displayImage:'product-image'" (click)="displaySelectedImage()"></div>


 ` public displaySelectedImage(index: number) {
        const img = this._item.smallImages[index];
        console.log(img);
         this.item.largeImages.push(img);
         this._item.smallImages[index] === this.item.largeImages[0];
    }`

这段代码不起作用，我不确定我写的代码是否正确。有人可以帮忙吗。如果您需要更多信息，请告诉我。我只是这项技术的新手，也是堆栈的新手。提前致谢。

标签： angular

解决方案

我相信您正在尝试显示已经显示的图像的预览。

您可以尝试以下方法：

更新您的组件：

@ViewChild('imgDiv') imgDiv: ElementRef;
imageSrc = '';

在你的组件中注入渲染器

constructor(private renderer:Renderer2){
}

更新您的显示方法并添加一种新方法：

public displaySelectedImage(src) {
  this.imageSrc = src;
  this.renderer.setStyle(this.imgDiv.nativeElement,'display','block');
}

hideImage(){
   this.renderer.setStyle(this.imgDiv.nativeElement,'display','none')
}

更新您的模板

<div #imgDiv class="img-div">
  <span (click)="hideImage()">&times;</span>
  <img [src]="imageSrc">
</div>

更新你的 CSS

.img-div {
 display: none;
 position: fixed;
 z-index: 2000;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 overflow: auto;
 background-color: rgb(0, 0, 0);
 background-color: rgba(0, 0, 0, 0.9);
 }

在调用显示函数时传递图像 src，您可能需要根据需要更新 css

推荐阅读