локальные пути к файлам не работают внутри v-lazy-image

Question

Для баннера страницы я использую плагин v-lazy-image. Для этого мне нужно включить локальные файлы изображений. Но не работает.

<v-lazy-image
      srcset="../../../assets/images/banners/Small-Banner.svg 320w, ../../../assets/images/banners/Big-Banner.svg 480w"
    sizes="(max-width: 320px) 280px, 440px"
    src="../../../assets/images/banners/Big-Banner.svg"
      />

Но работает для внешних ссылок. Как показано ниже.

<v-lazy-image
      srcset="https://cdn.pixabay.com/photo/2017/03/25/17/55/color-2174045_960_720.png 320w, https://blah/blah.png 480w"
    sizes="(max-width: 320px) 280px, 440px"
    src="https://blah/blah.png"
      />

Answer 1

Вам необходимо импортировать изображение в свой компонент. Не уверен, что есть лучший способ для srcset, но вот как вы бы сделали это, используя src.

EDIT: Обновлено для обработки srcset

<template>
    <img :src="banner" :srcset="bannerSizes" alt="Hero Image" />
</template>

<script>
import banner from "@/assets/images/banners/Small-Banner.svg";

export default {
    computed: {
        banner() {
            return banner;
        },
        bannerSizes() {
            return `
               ${this.size(this.banner, "300")}, 
               ${this.size(this.banner, "1440")}
            `;
        }
    },
    methods: {
        size(image, width) {
            return `${image} ${width}w`;
        }
    }
};
</script>