Search code examples
quasar-framework

How do I create a clickable image in Quasar?

I would like to have an image that, when clicked, sends the user to the landing page (or another route). In pure HTML, we can do something like:

<a href='route'> 
  <img src='pathToImage'/> 
</a>

However, Quasar's QImg doesn't have a "to" property. I have tried somewhat hacky ways to do it, such as wrapping it in a QBtn or a QItem in a QList:

<q-btn to="route"> 
  <q-img src='pathToImage'/>
</q-btn>

<q-list>
  <q-item to="route">
    <q-img src='pathToImage'/>
  </q-item>
</q-list>

This code does not show the image as I would expect. In documentation examples, they keep wrapping the images in QAvatar blocks, but then the images always have the same width and height, resulting in a square image instead of an elongated one.

Simply replacing with works fairly well, but then I lose all the advantages of using QImg.

Solution

  • Quasar implements vue-router as mentioned in the docs about App Routing and assume you are familiar with it. Imho it wouldn't had hurt if they had provided a simple example for such a basic use case like "linking something to x". But well here you are:

    <router-link to="/">
  <q-img src="path/to/image" />
</router-link>