如何在 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 图像吗？ 我以前没用过 pug。

<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" />

Answer 2

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

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

Answer 3

您可以使用：

 <a @click="Redirect">
     <img src='IMAGE_SRC'  />
  </a>

或者

<img @click="Redirect" src='IMAGE_SRC'/>


new Vue({
            el: '#app',
            methods:
            {
               Redirect()
                  {
                     window.location.href = "https://jsfiddle.net/";

                     //or 

                      //this.$router.push('LINK_HERE'); // if ur using router
                  }
               }
      })

演示链接：

https://jsfiddle.net/snxohqa3/5/