Enclosing a router-link tag in an image in vuejs

Question

Can I wrap or enclose a router-link tag in an image tag?

When I click the image, I want it to route me to the desired page.

Answer 1

Yes you can, but it's the other way around: you need to wrap your image with the router-link tag

<router-link to="/"><img src="path.jpg"/></router-link>

http://jsfiddle.net/vns5vwj9/1/

Answer 2

Slight update to @reinarg's answer. You can also use the tag="img" option on the router link like this:

<router-link to="/" tag="img" src="https://www.petfinder.com/wp-content/uploads/2012/11/91615172-find-a-lump-on-cats-skin-632x475.jpg"></router-link>

router-link will render as an img

fiddle

Answer 3

Add a click event to your img tag:

<img @click="methodName" src="image.jpg" alt="...">

Now in your methods property add the methodName callback that you want to fire when you click the image like:

methods: {
  methodName() {
    return this.$router.push('desired-page-path');
  }
};