[Feature Request] v-img fallback support

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

[esynaps]

Any update ?

[johnleider]

As far as I can understand from this thread, this feature will only be available in Vuetify 3 and not be added to Vuetify 2?

That is correct.