在 Vuetify 中使用 srcset

Question

我的webp图像没有在 Safari 和 Edge 中加载，所以如果浏览器无法加载webp文件，我想使用 srcset 来改用png变体。目前，这是我定义图像的方式：

<img
:srcset="`${require('../../assets/art/blob-right-side.webp')} ${require('../../assets/art/blob-right-side.png')}`"
:src="require('../../assets/art/blob-right-side.webp')"
class="hidden-sm-and-down"
height="500"
width="217"
style="position: absolute; top: 300vh; right: 0;"
/>

但是我的浏览器(Chrome(返回以下错误：

解析"srcset"属性值失败，因为它具有未知的描述符。

掉落的 srcset 候选者 "/images/blob-bottom-desktop.webp？92a59c3833d65ecd5913e9d37354bcc8">

谁能向我解释为什么这不起作用？我找不到太多关于它的信息。

Answer 1

您可能错过了值之间的逗号

:srcset="`${require('../../assets/art/blob-right-side.webp')}, ${require('../../assets/art/blob-right-side.png')}`"

而且我没有看到任何分辨率切换的规则

:srcset="`${require('../../assets/art/blob-right-side.webp')}, ${require('../../assets/art/blob-right-side.png')}` 1.5x"