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

Posted 2023-02-23

【中文标题】如何在 Vue.js 中使用图像作为按钮？

【英文标题】：How to use an image as a button in Vue.js?

【发布时间】：2019-10-24 16:32:48

【问题描述】：

我正在尝试将登录按钮作为 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>

【问题讨论】：

请使用此代码***.com/questions/46903284/…

我已经看过那个问题了，但我仍然很困惑。这里仍然是 Vue 初学者。那我应该把img(src="../assets/img/login_button.png")放在哪里呢？

【参考方案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" />

【讨论】：

谢谢。我们只是在我们的项目中使用 pug，所以我在这里真的没有选择。最后，在 pug 中编写您的解决方案是这样的：img(src="../assets/img/btn_google_signin_dark_normal_web.png" v-on:click="redirect_to_login")

为什么要使用像 Vuetify 这样的框架而不使用它的组件？在这里没有达到目的不是吗？

@JamieMarshall 我认为 OP 没有提到 Vuetify。我相信他们试图仅使用 Vue 本身来制作自己的组件。

@kevmc，哎呀，我的错。我最终在这里搜索 Vuetify 问题标签。不知道我是如何异花授粉的。

【参考方案2】：

你可以使用：

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

【参考方案3】：

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

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