Различное изображение баннера, используемое для размеров экрана рабочего стола и мобильного устройства

Question

У меня проблема с изменением изображения баннера в зависимости от размера экрана. Мне нужно использовать большое изображение для больших размеров экрана и другое изображение для мобильных устройств. Код домашней страницы выглядит как

 <heroic-banner :image="'Big-Banner.svg'" :placeholderImage="'banner-home-placeholder.jpg'" :overlay="0" :isBannerLoaded="isBannerLoaded">
...
</heroic-banner>

Вот компонент herio c -banner.

    <template>
      <div v-if="graphics.placeholder.trim() !== ''" class="banner-wrapper heroic">
        <div class="image-loader-wrapper">
          <v-lazy-image
          :src="imageUrl"
          :src-placeholder="placeholderImageUrl"/>
        </div>
        <div class="slot-wrapper full-height">
          <slot></slot>
        </div>
        <div class="overlay" v-if="overlay" v-bind:style="{'opacity': overlay, 'background-color': overlayColor}"></div>
      </div>
    </template>

 computed: {
    imageUrl () {
      return require('../../../assets/images/banners/' + this.image)
    },
    placeholderImageUrl () {
      return require('../../../assets/images/banners/' + this.placeholderImage)
    }
  }

srcset не работает внутри 'v-lazy-image' I пробовал. Посоветуйте, пожалуйста, лучшее решение для этого? Это проект vuejs.

Это код, использующий srcset. используя образцы изображений!

<div class="image-loader-wrapper">
      <v-lazy-image
      srcset="https://cdn.pixabay.com/photo/2017/03/25/17/55/color-2174045_960_720.png 320w, https://cdn.pixabay.com/photo/2017/07/01/19/48/background-2462431_960_720.jpg 480w"
    sizes="(max-width: 320px) 280px, 440px"
    src="https://cdn.pixabay.com/photo/2017/07/01/19/48/background-2462431_960_720.jpg"
      />
    </div>

Я здесь что-то не так делаю?