如何使用<source> v-img 中的标签 Vuetify.js？

Question

我正在尝试使用 webp img 来代替 jpg 或 png img。 有些浏览器可能不支持webp img，所以我们使用html标签<source>来这样做，以确保至少有一个jpg img。

<picture>
    <source srcset="good.webp" type="image/webp">
    <img src="fallback.jpg" alt="">
</picture>

但是，我不知道如何在 < v-img > Vuetify.js 中使用相同的方法。有人知道如何将 < source > 标记包装在 < v-img > 中，或任何其他方法来做同样的事情吗？ （webp img 第 1，jpg 第 2）

Answer 1

Vuetify 的<v-img>不会创建<img>它将 div 的背景设置为提供的来源，因此您不能在其中使用<picture>或<source>标签。