Отобразить изображение в <a> - PullRequest
Новая
       12

Отобразить изображение в <a>

0 голосов
/ 21 июня 2019

У меня есть изображение для отображения благодаря маячку.

Если я получаю изображение онлайн со ссылкой 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>

TO 

<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>

1 Ответ

1 голос
/ 21 июня 2019

Поскольку вы используете угловой, воспользуйтесь этим: 

<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();
}

Это будет работать так, как будто вы на самом деле нажимаете на ссылку, но на самом деле вы не используете alink в своем шаблоне. Кроме этого, я не вижу проблемы с добавлением изображения к ссылке: 

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