javascript - 如何在 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>

Answer 1

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

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

虽然因为您使用的是 Vue 而不是实际的 HTML 表单，您甚至可能不需要按钮，您可以只将点击绑定(bind)添加到图像

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