title: Why is Vuetify reloading the image every time other card properties change?
body: <p>I am using Vuetify to create a login form for an application.</p>
  
  <p>This form is similar to Google's login form which first asks for an email address then for a password on the next screen. The purpose of doing this is to look up the user's email address to see whether to perform local authentication or to redirect the user to a Single-Sign-On provider.</p>
  
  <p>Here is the relevant part of the code of the login component:</p>
  
  <pre><code>&lt;template&gt;
      &lt;v-app id="sm-login"&gt;
          &lt;v-content&gt;
              &lt;v-container class="fill-height" fluid&gt;
                  &lt;v-card class="mx-auto px-10 pb-9" width="450px" :loading="loading"&gt;
                      &lt;v-card-title class="justify-center pt-12"&gt;&lt;img src="../../images/logo.png"&gt;&lt;/v-card-title&gt;
                      &lt;v-card-subtitle class="text-center py-6 headline"&gt;Sign In&lt;/v-card-subtitle&gt;
                      &lt;v-card-text&gt;
                          &lt;v-form v-if="!showPassword" v-on:submit.prevent="lookupEmail"&gt;
                              &lt;v-text-field v-model.trim="email" label="Email" name="email" type="email" outlined /&gt;
                          &lt;/v-form&gt;
                          &lt;v-form v-if="showPassword" v-on:submit.prevent="login"&gt;
                              &lt;v-chip outlined class="mb-6" close @click:close="showPassword = false"&gt;&lt;v-avatar left&gt;&lt;v-icon&gt;mdi-account-circle&lt;/v-icon&gt;&lt;/v-avatar&gt; {{email}}&lt;/v-chip&gt;
                              &lt;v-text-field v-model="password" label="Password" name="password" type="password" outlined /&gt;
                          &lt;/v-form&gt;
                      &lt;/v-card-text&gt;
                      &lt;v-card-actions&gt;
                          &lt;v-btn text&gt;Forgot Password?&lt;/v-btn&gt;
                          &lt;v-spacer /&gt;
                          &lt;v-btn color="primary" v-on:click="clickButton"&gt;Log In&lt;/v-btn&gt;
                      &lt;/v-card-actions&gt;
                  &lt;/v-card&gt;
              &lt;/v-container&gt;
          &lt;/v-content&gt;
      &lt;/v-app&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      data() {
          return {
              loading: false,
              email: '',
              password: '',
              showPassword: false,
          };
      },
      methods: {
          lookupEmail() {
              this.loading = true;
              // Replaced an API call with a timeout for demonstration purposes
              setTimeout(() =&gt; {
                  this.loading = false;
                  this.showPassword = true;
              }, 2000);
          },
          login() {
              // DO LOGIN HERE ...
          },
          clickButton() {
              if (this.showPassword) {
                  this.login();
              } else {
                  this.lookupEmail();
              }
          }
      }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>The problem here is the logo in the <code>v-card-title</code> section. Every time the <code>loading</code> property is toggled on or off, the entire card jumps slightly up and then down again. I figured out that adding the logo's explicit height and width fixes the jumping, and it does, but the image still flickers every time.</p>
  
  <p>Using the DevTools' Network tab, I discovered that the logo is reloaded from the server every time the loading bar appears or disappears. Needless to say, this is <em>not</em> the desired or expected behavior.</p>
  
  <p>Why is the logo reloading every time, and what can I do about it?</p>