Vuetify: [Feature Request] v-img fallback support

[jvanst]

Problem to solve

As the web progresses forward, new standards of image compression arise. Since not all browsers support the latest formats, we need an effective way to provide a fallback format when the passed media cannot be rendered.

Currently v-img will not render the background-image if the provided image format is not supported.

Ex. This example renders in Chrome 70, but not in Firefox 63.

<v-img src="img/awesomeWebPImage.webp" />

Before using Vuetify I solved this problem with the HTML5 <picture> element. I would love to do the same with v-img!

<picture>
  <source srcset="img/awesomeWebPImage.webp" type="image/webp">
  <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> 
  <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>

Proposed solution

As a developer using v-img, the easiest approach for myself is allowing src prop to contain an array of image sources. When an array of sources is passed the browser could fallback in the order of sources provided.

Therefore the snippet from above would become:

<v-img :src="['img/awesomeWebPImage.webp', 'img/creakyOldJPEG.jpg']" />

This would be the resulting css:

.img {
  background-image: image("img/awesomeWebPImage.webp", "img/creakyOldJPEG.jpg")
}

Source: https://codepen.io/sandip_rb/pen/ZWNEwr

[moshe]

Any update regarding the feature request?

[esynaps]

Any update ?

[r3vile]

could also need this feature for my PWA

[esynaps]

Here is an alternative solution that I use for my users's avatars
You can define an image during the loading of the avatar, and one in the case where the user does not have an avatar (failure to load the image returning a 404)

<template>
    <img :src="picture" :alt="user.name">
</template>

<script>
  import placeholder from '@/assets/XXX'

  export default {
    props: {
      user: Object
    },
    mounted() {
      let img = new Image()

      let picture = this.user.picture

      img.src = picture
      img.onload = () => {
        this.picture = picture
      }
      img.onerror = (e) => {
        this.picture = placeholder // Image used in case of error (here, the same as that for loading)
      }
    },
    data() {
      return {
        picture: placeholder // Image used during loading
      }
    },
  }
</script>