Vue.js 在Vue中，如何使用require（）引用srcset中的多个图像

我有一个像这样的模板

<template>
  <picture>
    <source media="(min-width: 700px)" :srcset="require(`@/assets/img/${image}.webp`)" type="image/webp" />
    <source
      media="(min-width: 100px)"
      :srcset="`@/assets/img/${image}_small.webp 1x, @/assets/img/${image}.webp` 2x"
      type="image/webp"
    />
    <source media="(min-width: 700px)" :srcset="`@/assets/img/${image}.jpg`" />
    <img
      id="mainImg"
      :src="require(`@/assets/img/${image}.jpg`)"
      :srcset="`@/assets/img/${image}_small.jpg 1x, @/assets/img/${image}.jpg 2x`"
      :alt="altText"
    />
  </picture>
</template>

:srcset="require(`@/assets/img/${image}_small.webp 1x, @/assets/img/${image}.webp 2x`)"

但是当有多个图像时，我不能做这样的事情

<template>
  <picture>
    <source media="(min-width: 700px)" :srcset="require(`@/assets/img/${image}.webp`)" type="image/webp" />
    <source
      media="(min-width: 100px)"
      :srcset="`@/assets/img/${image}_small.webp 1x, @/assets/img/${image}.webp` 2x"
      type="image/webp"
    />
    <source media="(min-width: 700px)" :srcset="`@/assets/img/${image}.jpg`" />
    <img
      id="mainImg"
      :src="require(`@/assets/img/${image}.jpg`)"
      :srcset="`@/assets/img/${image}_small.jpg 1x, @/assets/img/${image}.jpg 2x`"
      :alt="altText"
    />
  </picture>
</template>

:srcset="require(`@/assets/img/${image}_small.webp 1x, @/assets/img/${image}.webp 2x`)"

如何在具有1x和2x版本的srcset标记中使用require？

<img :srcset="require(`@/assets/img/${image}_small.webp`) + ' 1x, '
            + require(`@/assets/img/${image}.webp`) + ' 2x'">

应该有用

require（）。但是如果您希望
require（）
匹配资产，则必须逐个传递它们，并使用
require（）
的结果路径自己执行
srcset
所需的连接。

如果给
require（）
一个包含多个串联路径的大字符串，它将不会神奇地检测和替换每个路径