在 Vuetify 中使用 srcset答案

【问题标题】：Using srcset in Vuetify在 Vuetify 中使用 srcset
【发布时间】：2020-07-02 05:31:11
【问题描述】：

我的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"

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

【问题讨论】：

标签： vue.js vuetify.js webp srcset

【解决方案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"

【讨论】：