Display an image in a

Question

I have an image to display thanks to a lighbox.

If I get the image online with a link http there is no problem but if I want to recover an image of the database I encounter a problem. I would like to display the image in the tag as below.

IF you have tracks I thank you in advance. Beautiful day

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

this should answer your question https://stackoverflow.com/questions/45530752/getting-image-from-api-in-angular-4-5 — Guillaume, Jun 21 '19 at 14:32

score 1 · Answer 1 · 2019-06-21T14:52:10.680

1

Since you use angular, take advantage of it :

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

This will work as if you were actually clicking on a link, but you don't actually use alink in your template. Other than that, I don't see an issue with appending an image to a link :

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

edited Jun 21 '19 at 14:52

answered Jun 21 '19 at 14:29

In Angular, if you are going to manipulate DOM, you should probably use [Renderer2](https://angular.io/api/core/Renderer2) – Alexander Staroselsky Jun 21 '19 at 14:37
1

@AlexanderStaroselsky the renderer is used to keep Angular's exec context. Here, I create a link, click on it to open a new tab, and delete that link. The renderer is completely useless. – Jun 21 '19 at 14:37
@Maryannah Thank you for your answer. I use a lightbox. So I need a link on the tag and another on the inside. Except that I can not use a link http because the image is in the database (It's as if I display the image twice, the first on the page and the second when I click on it s 'enlarge) Do you think you have a solution? – Valentin Jun 21 '19 at 14:43
1

@Valentin Sorry I should have adapted my answer to your need, my bad. I have edited it, now it should work as if you were using a link ! – Jun 21 '19 at 14:52

Display an image in a

1 Answers1