Question

由于有一个lighbox，我有一个要显示的图像。

如果通过链接http在线获取图像，那没有问题，但是如果我想恢复数据库的图像，则会遇到问题。我想在标签中显示图像，如下所示。

如果您有音轨，我先谢谢您。美好的一天

<a href="https://unsplash.it/1200/768.jpg?image=256" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">
  <img src="https://unsplash.it/600.jpg?image=256" class="img-fluid rounded">
</a>

到

<div class="row" *ngFor="let drawing of drawings;">
<a href="????" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">
  <img style="max-width:400px;" *ngIf="drawing.image" [src]="drawing.image">
</a>
</div>

Answer 1

由于使用了角度，请利用它：

<div class="image-container" (click)="navigate()">
  <img src="...">
</div>

navigate() {
  const a = document.createElement('a');
  a.href = '...';
  a.setAttribute('data-toggle', 'lightbox');
  a.setAttribute('data-gallery', 'gallery');
  a.click();
  a.remove();
}

这将像您实际单击链接一样工作，但实际上并未在模板中使用链接。除此之外，我看不到将图像附加到链接的问题：

<a href="google.com" target="_blank">
  <img src="https://via.placeholder.com/500x100?text=ImagePlaceholder">
</a>

在<a>中显示图像

1 个答案: