Using an image as a button in Vue.js: A step-by-step guide

Question

Using an image as a button in Vue.js: A step-by-step guide

I'm currently working on creating a login button within a single-file-component using Vue.js in my Rails application with a Vue.js front-end. The purpose of this button is to redirect users to an external login page when clicked.

I am wondering how I can incorporate an image as the button itself. My assumption is that I would need to utilize v-on:click for the redirection functionality, but I am unsure how to proceed from there.

At the moment, the code I have displays a static button that includes the path to an image like

img(src="../assets/img/login_button.png")

. Clicking on this button does not display the actual image as intended. Instead, only the path is visible.

// 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{ // This method has not been implemented yet 
  }
}
</script>

javascript typescript vue.js vue-component

Answer 1

Answer №1

Instead of incorporating an HTML image in your button, have you considered using a different approach? I am not familiar with pug.

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

You could potentially eliminate the button altogether since you are working with Vue and not a traditional HTML form. Simply bind the click event directly to the image instead.

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

Answer 2

Instead of incorporating an HTML image in your button, have you considered using a different approach? I am not familiar with pug.

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

You could potentially eliminate the button altogether since you are working with Vue and not a traditional HTML form. Simply bind the click event directly to the image instead.

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

Answer 3

Answer №2

I am not well-versed in pug, so I'm unsure of the specific syntax you'll need. However, you can utilize the <router-link> tag to define the route. For instance (using Vuetify)

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

Answer 4

I am not well-versed in pug, so I'm unsure of the specific syntax you'll need. However, you can utilize the <router-link> tag to define the route. For instance (using Vuetify)

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

Answer 5

Answer №3

To achieve the desired outcome, you have two options:

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

or

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


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

                     //or 

                      //this.$router.push('LINK_HERE'); // if you are using a router
                  }
               }
      })

Check out the demo link below:

https://example.com/demo-link/

Answer 6

To achieve the desired outcome, you have two options:

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

or

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


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

                     //or 

                      //this.$router.push('LINK_HERE'); // if you are using a router
                  }
               }
      })

Check out the demo link below:

https://example.com/demo-link/

Using an image as a button in Vue.js: A step-by-step guide

Answer №1

Answer №2

Answer №3

Similar questions

Encountering a TypeError: relativeURL.replace is not a valid function in Next.js

Retrieve information from a URL using an Express API

Displaying notification in Ionic 2

Unable to establish communication with server. Facing issues in connecting AngularJS with NodeJS

Node.js application for changing attributes in an HTML string

Tips for extracting HTML tags directly from JSON data

The Javascript navigation bar is not displaying properly on mobile devices as it should

Unable to assign value to a public variable in Angular

Traditional method for comparing prevProps in componentDidUpdate

Error: Null is causing an issue and preventing property 'isSkipSelf' from being read in Angular7

experiencing difficulty in transmitting HTML content through nodemailer

String Compression - Number of Elements

Transmit data from Raspberry Pi to Apache Server with strong security measures

Double your audio experience with Webaudio by playing the sound twice

"Vue component inputs fail to update when used in the same instance

onload function prevents further URL redirection

Implementing personalized callback methods for AJAX requests in Prototype

Stop Jade from collapsing the directory hierarchy

Error: undefined callback function in asynchronous parallel execution

Is it feasible to use a component in a recursively manner?