如何在Vue.js中使用图片作为按钮？
如何在Vue.js中使用图片作为按钮？
提问于 2019-06-10 17:20:11
我正在尝试在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>回答 3
Stack Overflow用户
回答已采纳
发布于 2019-06-10 17:44:17
有什么理由不能在按钮中直接使用普通的HTML图片吗？我以前没用过pug。
<button v-on:click="redirect_to_login"><img src="../assets/img/login_button.png" /></button虽然您使用的是Vue而不是实际的HTML表单，但您可能甚至不需要按钮，所以可以将click绑定添加到图像中
<img src="../assets/img/login_button.png" v-on:click="redirect_to_login" />Stack Overflow用户
发布于 2020-08-21 15:04:08
我不熟悉pug，所以我不知道您需要的正确语法是什么。但是您可以使用<router-link>标记来设置路由。例如(使用Vuetify)
<router-link to="/">
<v-img src="/path/to/img.gif"/>
</router-link>Stack Overflow用户
发布于 2019-06-10 20:50:27
您可以使用：
<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
}
}
})演示链接：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56523600
复制相关文章
相似问题
腾讯云开发者
