Tips for implementing a fallback image in v-img using Vuetify

Question

Tips for implementing a fallback image in v-img using Vuetify

Within my Vuetify application, I am utilizing a v-img component and I am looking to implement a fallback image in case the primary one fails to load.

<v-img :src="cPicture" contain v-on:error="onImgError"></v-img>


cPicture : function() {
            return this.failed_image ? "https://assets.dryicons.com/uploads/icon/svg/9872/ab3c0a16-6f14-4817-a30b-443273de911d.svg" : "http://myimg.jpg/";
        },


onImgError : function(event) {
            alert(1);
            this.failed_image = true;
            //this.$forceUpdate();
        },

The alert message appears as expected. However, an error is also thrown by Vuetify in the console, and the fallback image is not displayed.

How can I resolve this issue?

Note that the main image link intentionally leads to a non-existent location, but if a valid link is provided, it will be successfully rendered.

javascript vue.js vuejs2 vue-component vuetify.js

Answer 1

Answer №1

Consider utilizing cPicture as a computed property and onImgError as a method :

new Vue({
  el: '#app',
  data() {
    return {
      failed_image: false
    }
  },
  computed: {
    cPicture: function() {
      return this.failed_image ? "https://picsum.photos/500/300?image=4" : "https://pisum.photos/500/300?image=5";
    },



  },
  methods: {
    onImgError: function(event) {

      this.failed_image = true;

    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc8a899988959a85bccdd2cfd2cb">[email protected]</a>/dist/vuetify.min.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-layout>
      <v-flex xs12 sm6 offset-sm3>
        <v-card>
          <v-container grid-list-sm fluid>
            <v-img :src="cPicture" contain v-on:error="onImgError"></v-img>
          </v-container>
        </v-card>
      </v-flex>
    </v-layout>
  </v-app>
</div>

Take a look at this pen

UPDATE

I mistakenly provided an invalid image link for the desired image, which will result in an exception shown in console :

"[Vuetify] Image load failed

In such cases, we will load another image with a valid link.

Answer 2

Consider utilizing cPicture as a computed property and onImgError as a method :

new Vue({
  el: '#app',
  data() {
    return {
      failed_image: false
    }
  },
  computed: {
    cPicture: function() {
      return this.failed_image ? "https://picsum.photos/500/300?image=4" : "https://pisum.photos/500/300?image=5";
    },



  },
  methods: {
    onImgError: function(event) {

      this.failed_image = true;

    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc8a899988959a85bccdd2cfd2cb">[email protected]</a>/dist/vuetify.min.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-layout>
      <v-flex xs12 sm6 offset-sm3>
        <v-card>
          <v-container grid-list-sm fluid>
            <v-img :src="cPicture" contain v-on:error="onImgError"></v-img>
          </v-container>
        </v-card>
      </v-flex>
    </v-layout>
  </v-app>
</div>

Take a look at this pen

UPDATE

I mistakenly provided an invalid image link for the desired image, which will result in an exception shown in console :

"[Vuetify] Image load failed

In such cases, we will load another image with a valid link.

Answer 3

Answer №2

My approach is similar, but I achieve it with a more concise code.

<v-img tile :src="logo.url" v-on:error="logo.url='/logo.svg'" />

Answer 4

My approach is similar, but I achieve it with a more concise code.

<v-img tile :src="logo.url" v-on:error="logo.url='/logo.svg'" />

Answer 5

Answer №3

This question was recently raised on the Vuetify GitHub page and it's something that should definitely be included in the upcoming Vuetify 3 release.

I came up with my own solution to tackle this issue in the meantime.

First, I initialize two pieces of data:

data(): {
 avatarLoadingFailed: false,
 fallbackAvatar: fallbackAvatar,
}

The fallbackAvatar variable references the image file that will be displayed if the loading fails.

Next, I create a computed property to determine which avatar to display:

computed: {
  avatar() {
    return this.avatarLoadingFailed
      ? this.fallbackAvatar
      : this.getUserAvatar;
  },
}

Finally, within my template tag, I have implemented the following code:

// @error="avatarLoadingFailed = true" works fine as well
<v-img :src="avatar" v-on:error="avatarLoadingFailed = true"/>

I have thoroughly tested this solution in VueJS, both with and without TypeScript integrated.

Answer 6

This question was recently raised on the Vuetify GitHub page and it's something that should definitely be included in the upcoming Vuetify 3 release.

I came up with my own solution to tackle this issue in the meantime.

First, I initialize two pieces of data:

data(): {
 avatarLoadingFailed: false,
 fallbackAvatar: fallbackAvatar,
}

The fallbackAvatar variable references the image file that will be displayed if the loading fails.

Next, I create a computed property to determine which avatar to display:

computed: {
  avatar() {
    return this.avatarLoadingFailed
      ? this.fallbackAvatar
      : this.getUserAvatar;
  },
}

Finally, within my template tag, I have implemented the following code:

// @error="avatarLoadingFailed = true" works fine as well
<v-img :src="avatar" v-on:error="avatarLoadingFailed = true"/>

I have thoroughly tested this solution in VueJS, both with and without TypeScript integrated.

Answer 7

Answer №4

I really admire the solution provided by @maurilio-atila. In a similar situation where the image was sourced from a different server, I found a workaround that worked for me:

 <v-img :src="`${item.image ?`https://some/endpoint/${item.image}` : '/fallback.png'}`"/>

Although it doesn't cater to v-on:error, it effectively prevents any error from occurring.

Answer 8

I really admire the solution provided by @maurilio-atila. In a similar situation where the image was sourced from a different server, I found a workaround that worked for me:

 <v-img :src="`${item.image ?`https://some/endpoint/${item.image}` : '/fallback.png'}`"/>

Although it doesn't cater to v-on:error, it effectively prevents any error from occurring.

Answer 9

Answer №5

A new feature has been introduced in Vuetify 3 that allows users to utilize the v-img error slot. In the example below, if there are any errors with the first source image, the second source within the error slot will be displayed instead.

<v-img src="https://pisum.phots/500/300?imige=4">
  <template v-slot:error>
    <v-img src="https://picsum.photos/500/300?image=5"></v-img>
  </template>
</v-img>

Answer 10

A new feature has been introduced in Vuetify 3 that allows users to utilize the v-img error slot. In the example below, if there are any errors with the first source image, the second source within the error slot will be displayed instead.

<v-img src="https://pisum.phots/500/300?imige=4">
  <template v-slot:error>
    <v-img src="https://picsum.photos/500/300?image=5"></v-img>
  </template>
</v-img>

Tips for implementing a fallback image in v-img using Vuetify

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Unable to establish connection with server through Ajax request on HTML page

Sending users to a new destination following an interaction

ViewCheck and every

Display tab content in Vue.js upon clicking

Encounter Issue: "Describe" function not recognized. This error occurred during the activation of Mocha Test

Retain selected choices even after refreshing the page using PHP

Invoke a C# function (WebMethod) using Javascript (JQuery)

Guide to creating a Chrome extension that can detect updates in MongoDB documents

Custom Email Template for Inviting Msgraph Users

The selected plugin appears to be incompatible with mobile browsers

When incorporating sequelize's belongsTo and hasOne methods, you may encounter an issue where the call stack size surpass

Adjust camera to align with the loaded object in Three.js

Managing numerous JavaScript objects within a plugin

What exactly does Container-Based Authorization entail?

Managing PHP multiple follow-up options in HTML select fields

Codeigniter code to retrieve dynamic data in a select box

What are the essential files needed in Kendo UI Core for a mobile app?

Is it feasible to invert the order of arguments in async.apply?

Wait for response after clicking the button in Vue before proceeding

What is the best way to save JSON data within HTML elements?