Динамический :src возвращаемый из геттера или функции, Vue, Vite, Vutify

Question

Мне нужно чтобы функция getIcons() каждый раз при вызове возвращала новый путь который подставится в :src="getIcons()" и отобразит иконку. Только мой подход почему-то не работает. Вместо 25 картинок я получаю 25 ошибок в консоли 404 (Not Found). Хотя путь я возвращаю верный.

<template>
    <div class="pt-8">
        <img
            v-for="icon in icons"
            :src="getIcons()"
            alt="Icon"
        >
    </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
    setup() {
        const icons = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25']

        const getIcons = () => {
            const rndIcon = icons[Math.floor(Math.random() * icons.length)]
            return `../icons/viking-icons-48px/${rndIcon}.webp`;
        }

        return {
            getIcons,
            icons
        }
    }
}
</script>

Answer 1

Итак спустя тысячи перестановок src и чтения документации vite(у меня проект собран на vuetify в нём по умолчанию используется vite). Я пришёл к правильному решению этого вопроса. Всё, что нужно было сделать это просто указывать пути от src. Вот простой вариант, который работает


function testSrc(name) {
 return `/src/icons/viking-icons-48px/${name}.webp`
}

А вот более сложный с офф документации, но тоже рабочий. Какой более правильный не знаю. Оставлю оба.

function getImageUrl(name) {
 return new URL(`/src/icons/viking-icons-48px/${name}.webp`, 
 import.meta.url).href
}

Варианты через @/icons/viking-icons-48px/${name}.webp не работают и отображают битые картинки. Только полный путь от src привёл к успеху /src/icons/viking-icons-48px/${name}.webp

БЛОГ НА HUSL

Динамический :src возвращаемый из геттера или функции, Vue, Vite, Vutify

Ответы (1 шт):