如何在Quasar中创建可点击的QImg图片？

这里有两种靠谱的方案，既能保留QImg的所有特性，又能实现点击跳转：

方案1：用Vue Router的<router-link>包裹QImg #

Quasar基于Vue Router，直接用router-link包裹QImg是最直接的方式，完全不会影响QImg的显示和功能：

<router-link to="/home">
  <q-img src="pathToImage" />
</router-link>

如果router-link自带的下划线样式影响美观，可以加个自定义类去掉：

<router-link to="/home" class="no-underline">
  <q-img src="pathToImage" />
</router-link>

<style scoped>
.no-underline {
  text-decoration: none;
}
</style>

方案2：给QImg绑定点击事件，手动触发路由跳转 #

如果需要在跳转前加一些逻辑（比如确认操作），可以给QImg加点击事件，调用Vue Router的push方法：

<q-img 
  src="pathToImage"
  @click="$router.push('/home')"
  style="cursor: pointer;"
/>

这里加cursor: pointer是为了让鼠标悬停时显示手型，提升用户体验。

为什么之前的方法不行？ #

• 用q-btn包裹：QBtn自带按钮的内边距、边框等样式，会把QImg的布局打乱，导致显示异常
• 用q-item包裹：QItem是列表项组件，自带列表的排版样式，同样会影响图片的正常显示
• 用q-avatar包裹：QAvatar强制将内容裁剪为方形，不符合你需要的长条形图片需求

这两种方案都能完美保留QImg的懒加载、响应式缩放、占位图、错误处理等优势，比直接用原生img标签靠谱多了。

内容的提问来源于stack exchange，提问作者Aba