CODEWITHSUNDEEP
vuejs2vuetify.js
Andreas Sahlbach
Andreas Sahlbach

Reputation: 228

How to display an "image-not-found" image in case of v-img loading errors

Look at this code pen for a simple vuetify setup.

https://codepen.io/khoulaiz/pen/gObJPxO?editors=1010

<template>
  <div id="app">
    <v-app>
      <v-content>
        <v-container>
          <v-row>
            <v-col v-for="i in images" :key="i" cols="4">
              <v-img max-height="150" max-width="150" :src="i" @error="errorHandler"/>
            </v-col>
          </v-row>
        </v-container>
      </v-content>
    </v-app>
  </div>
</template>

<scritp>
  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: () => ({
      images: [
        "https://via.placeholder.com/150",
        "https://via.placeholder.com/doesnotexist",
        "https://via.placeholder.com/152"
      ]
    }),
    methods: {
      errorHandler(url) {
        images[1] = "https://via.placeholder.com/151"
        this.$forceUpdate()
    }
  }
})
</script>

The middle image will fail to load. I have an error handler, in which I would like to replace the src attribute of the failing image with a working image and in which I would like to force a reload of the image.

I am able to replace the src of the failing image, but I fail in all my attempts to force a reload of the v-img.

Why on earth do I not get a reference to the v-img that fails to load? Instead I get the failing url, which doesn't help me to locate the failing element. :-(

Please tell me, how I can force the second image to show the backup image. Please note that the image should be part of a v-for loop.

Upvotes: 1

Views: 2907

Answers (3)

Navjot Singh Prince
Navjot Singh Prince

Reputation: 21

Here is our v-img: for dynamic loop through

<v-img 
      max-height="100%" 
     max-width="100%"
   :alt="item.name"
   :src="item.image ? item.image: require('~/assets/images/img-placeholder.jpg')"
            @error="onImageError()" 
          >
          </v-img>

here is error handler:

 methods: {
onImageError($event) {
   event.target.src = require('~/assets/images/img-placeholder.jpg');
},

}

Hope ! it helps you , must use $event

for better image handling you can do with backend image url(in case of image not found),with any Library(package) or default value(in database)

and For Professional Approach You can also use third party S3 cloud bucket service and generate presigned urls for all types of files.

Thank You, Enjoy :)

Upvotes: 2

discolor
discolor

Reputation: 1386

You need to access your images with this.

Changing your errorHandler to the following should do the trick

errorHandler(url) {
  this.images[1] = "https://via.placeholder.com/151"
  this.$forceUpdate()
}

Upvotes: 2

David Japan
David Japan

Reputation: 242

You can use ref so you can access your html object easily . Like below

 <v-col v-for="i in images" :key="i" cols="4">
          <v-img max-height="150" max-width="150" :src="i" :ref="'img_' + i" @error="errorHandler(i)"/>
 </v-col>

You need to set unique refs and pass that unique ref to errorHandler param.

From your errorHandler , you can take that param and retrieve image object dom by ref that set new src

errorHandler(i) {
    this.$refs['img_' + i][0].src = "https://via.placeholder.com/151"
}

Upvotes: 1

Related Questions