如何在 Vue.js 中使用图像作为按钮？

Question

我正在尝试将登录按钮作为 Vue.js 中的单个文件组件（它是一个带有 Vue.js 前端的 Rails 应用程序）。如果您单击此按钮，它应该会将您带到外部提供商的登录页面。

如何将图像用作按钮？我猜你使用 v-on:click 进行实际的重定向，但我被困在那里。

现在，下面的这段代码显示了一个看起来像 img(src="../assets/img/login_button.png") 的硬编码按钮。你可以点击它，但这显然不是我想要的。我想显示实际的 png 图像，而不是路径。

 // LoginButton.vue

<template lang="pug">
#login-button
  <button v-on:click="redirect_to_login">img(src="../assets/img/login_button.png")</button>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';

@Component
export default class LoginButton extends Vue{
  redirect_to_login():void{ // I haven't written this method yet
  }
}
</script>

原文由 reesaspieces 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

有什么理由不能在按钮中使用普通的 HTML 图像吗？我以前没用过哈巴狗。

 <button v-on:click="redirect_to_login"><img src="../assets/img/login_button.png" /></button

尽管由于您使用的是 Vue 而不是实际的 HTML 表单，您甚至可能不需要按钮，您只需将点击绑定添加到图像即可

<img src="../assets/img/login_button.png" v-on:click="redirect_to_login" />

原文由 kevmc 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我不熟悉哈巴狗，所以我不知道您需要的正确语法是什么。但是你可以使用 <router-link> 标签来设置路由。例如（使用 Vuetify）

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

原文由 user2721886 发布，翻译遵循 CC BY-SA 4.0 许可协议