Angular使用ngbModal实现图片弹窗时显示URL而非图片问题

你调用modalService.open()时传入的是图片URL字符串，NgbModal会直接将该字符串作为弹窗内容渲染，这就是为什么弹窗显示URL而非图片的原因。NgbModal需要的是模板引用或组件实例作为内容，而非纯文本字符串。

提供两种实现方式，任选其一即可：

方式一：使用模板作为弹窗内容 #

1. 修改Details.component.html #

添加弹窗模板，并调整图片的点击事件绑定：

<!-- 可点击的缩略图 -->
<img 
  [src]="sku.imageLink" 
  (click)="openImageModal(sku.imageLink)" 
  style="width: 50%; margin-right: 100px; margin-left: 10%; cursor: pointer;" 
  alt="产品图片"
>

<!-- 弹窗模板 -->
<ng-template #imageModal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">产品大图</h4>
    <button type="button" class="close" aria-label="Close" (click)="modalService.dismissAll()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body d-flex justify-content-center">
    <img [src]="currentImageUrl" class="img-fluid" alt="放大的产品图片">
  </div>
</ng-template>

2. 修改Details.component.ts #

添加模板引用和弹窗逻辑：

import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
// 保留其他原有导入

@Component({
  selector: 'lpr-details',
  templateUrl: './details.component.html',
  styleUrls: ['./details.component.scss']
})
export class DetailsComponent implements OnInit {
  sku: any;
  subCategory: Product;
  data: any={};
  quantity: number=1;
  i=1;
  currentImageUrl!: string; // 存储当前要显示的图片URL

  @ViewChild('imageModal') imageModal!: TemplateRef<any>; // 获取弹窗模板引用

  constructor(
    private route: ActivatedRoute,
    private productService: ProductsService,
    private dialogRef: MatDialog,
    public modalService: NgbModal // 改为public，方便模板内调用关闭方法
  ) { 
    this.sku=this.route.snapshot.paramMap.get('sku')
  }

  ngOnInit(): void {
    this.getProductbySku()
  }

  getProductbySku(){
    this.productService.getProductsBySku(this.sku)
    .subscribe(res=>{
      this.sku=res;
    })
  }
  
  openImageModal(imageUrl: string){
    this.currentImageUrl = imageUrl;
    // 打开模板弹窗，设置弹窗尺寸
    this.modalService.open(this.imageModal, {
      ariaLabelledBy: 'modal-basic-title',
      size: 'lg'
    });
  }
}

方式二：使用独立弹窗组件（复用性更高） #

1. 改造PopUpComponent #

PopUpComponent.html

<div class="modal-header">
  <h4 class="modal-title">产品大图</h4>
  <button type="button" class="close" (click)="activeModal.dismiss()">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body d-flex justify-content-center">
  <img [src]="imageUrl" class="img-fluid" alt="放大图片">
</div>

PopUpComponent.ts

import { Component, Input } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-pop-up',
  templateUrl: './pop-up.component.html',
  styleUrls: ['./pop-up.component.scss']
})
export class PopUpComponent {
  @Input() imageUrl!: string; // 接收父组件传入的图片URL

  constructor(public activeModal: NgbActiveModal) {}
}

2. 修改Details.component.ts的弹窗方法 #

// 保留其他原有代码
openImageModal(imageUrl: string){
  const modalRef = this.modalService.open(PopUpComponent, {
    ariaLabelledBy: 'modal-basic-title',
    size: 'lg'
  });
  modalRef.componentInstance.imageUrl = imageUrl; // 给弹窗组件传入图片URL
}

3. 调整Details.component.html的点击事件 #

<img 
  [src]="sku.imageLink" 
  (click)="openImageModal(sku.imageLink)" 
  style="width: 50%; margin-right: 100px; margin-left: 10%; cursor: pointer;" 
  alt="产品图片"
>

• 用[src]绑定图片地址，而非{{}}，这是Angular的最佳实践，能避免潜在的XSS风险
• 使用img-fluid类让图片自适应弹窗容器大小
• 可根据需求调整弹窗的size参数（如xl适配超大图）

内容的提问来源于stack exchange，提问作者Belbo