Проблема с пробелами в названиях файла в srcset

В проекте на vue.js ссылки на картинки в srcset получаются в таком виде:

Проблема в том, что все картинки у которых в названии есть пробел, в ссылке srcset, получаются битые. Пробелы не преобразовываются в "%20%", как в src, и ссылка просто обрезается. Получается, так:

src ссылка (ок):

"test.ru/w/320x240/articles/1542/Белка Салат из овощей.JPG"

srcset ссылка (не ок):

"test.ru/w/320x240/articles/1542/Белка"

Как можно сделать чтобы в srcset была поддержка названий с пробелами?

Lazyimage.vue:

<template>
    <component
        :is="to ? 'nuxt-link' : 'div'"
        :key="image"
        v-lazyload="{ observer: true }"
        :to="to"
        class="lazy-image"
    >
        <img
            :data-url="image"
            :srcset="srcset"
            :alt="title"
        >
 
    </component>
</template>

<script>
export default {
    name: 'LazyImage',
    props: {
        to: { type: String, default: '' },
        title: { type: String, default: '' },
        image: { type: String, default: '' },
        image2x: { type: String, default: '' }
    },
    computed: {
        srcset () {
            if (this.image && this.image2x) {
                return `${this.image} 1x, ${this.image2x} 2x`
            }

            return null
        }
    }
}
</script>

Вывод:

 <LazyImage
            v-if="preview.image && preview.image.thumbnail"
            :title="preview.title"
            :image="preview.image.thumbnail.sd"
            :image2x="preview.image.thumbnail.sd2x"
            class="article-preview__image mb-2"
            :to="`/${currentCity}/articles/${preview.slug}`"
        />