title: How to use an image as a button in Vue.js?
body: <p>I'm trying to make a login button as a single-file-component in Vue.js (it's a Rails app with a Vue.js front-end). If you click this button, it's supposed to take you to the an external provider's login page.</p>
  
  <p>How can I use an image as a button? I'm guessing you use <code>v-on:click</code> for the actual redirect, but I'm stuck there.</p>
  
  <p>Right now, this code below shows a hardcoded button that looks like <code>img(src="../assets/img/login_button.png")</code>. You can click on it, but that's obviously not what I want. I want to show the actual png image, not the path.</p>
  
  <pre><code>// LoginButton.vue
  
  &lt;template lang="pug"&gt;
  #login-button
    &lt;button v-on:click="redirect_to_login"&gt;img(src="../assets/img/login_button.png")&lt;/button&gt;
  &lt;/template&gt;
  
  &lt;script lang="ts"&gt;
  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 
    }
  }
  &lt;/script&gt;
  
  </code></pre>