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

Question

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

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

但是，我不知道如何在 Vuetify.js 中使用相同的方法。有人知道如何将 标签包装在 中，或任何其他方法来做同样的事情吗？ (webp img 1st, jpg 2nd)

Answer 1

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