making an image clickable angular

Question

I'm having an issue making my image clickable. It is a cart style photo with a little number bubble that tells you how many items you have in the cart. The div is clickable but the photo itself is not.

Here is my code:

 <a routerLink="/cart">
    <img class="cart" src="../../../assets/canoe detail.png" alt="Canoe Cart">
    <div *ngIf="quantity" class="quantity">{{quantity}}</div>
 </a>

I have also tried adding a click event to the image with a function just logs ("clicking") and I have also tried adding "routerLink='/cart'" to the image tag as well, but neither of these worked.

What am I missing?

Thank you in advance!!

Answer 1

Your code seems fine, should work

<a class="brand-logo" routerLink="/login">
 <img src="assets/img/logo-svg.svg" />
</a>

Try removing the other div and check, but should work even with it. This works for me

Answer 2

Add this CSS for a

a{display:inline-block}

Answer 3

Solved! Even though it was visible, it was behind the navbar so changing the z-index fixed it.

a {
  z-index: 5;
}