Ребят, подскажите, как правильно решить такую проблему? Есть пути к картинкам

Почему такой код не работает? Картинка точно есть по этому, и без переменной работает! image = '@/assets/images/cat.png' <img :src="image" /> 1. При использовании сборщиков модулей (Webpack, Vite), с файлами и картинками тоже работают, как с модулями. '@/assets/images/cat.png' - это путь до картинки в исходном коде. После импорта файла через сборщик в результате импорта будет путь до файла в собранном приложении. Он будет в другой директории, с хэшем в имени для кэширования, а может даже преобразован или inline-ссылкой (data url). import Cat from '@/assets/images/cat.png' console.log(Cat); // /img/Cat.45df63.png v-bind в :src работает в рантайме (в браузере), а путь должен определяться ещё при сборке приложения. <img :src="Cat" /> - Работает <img :src="require('@/assets/images/cat.png')" /> - Тоже работает в сборщиках с require 2. Но почему тогда вот так работает? <img src="@/assets/images/cat.png" /> Сборщик с @vue/sfc-compiler знает, что в src="" в HTML и url() в CSS указывается путь. Если он относительный (не с /), то он автоматически работает с ним, как с модулем. Но это должен быть статический путь именно в таком атрибуте. :src или data-src - не сработают <img src="@/assets/images/cat.png" data-src="@/assets/images/cat.png" /> работает как <img :src="require('@/assets/images/cat.png')" data-src="@/assets/images/cat.png" /> превращаясь в <img src="/img/Cat.45df63.png" data-src="@/assets/images/cat.png" /> 3. Что же тогда делать, если надо хранить путь в данных? Используйте импорт модуля: Webpack / Vue CLI: image = require('@/assets/images/cat.png') Vite: import image from '@/assets/images/cat.png' (работает всегда, но на верхнем уровне) image = new URL('../assets/images/cat.png', import.meta.url).href не работает на SSR и только без алиасов 4. Но что если мне нужно динамически определять картинку по имени, например, иконку? Я заранее не знаю, какая именно картинка нужна. В require и new Url можно передавать шаблонную строку или сложение строк для вычисления пути. Тогда сборщик разберёт эту строку и будет считать, что вы можете импортировать в рантайме ЛЮБОЙ файл, подходящий под шаблон. Например, здесь сборщик включит в сборку ВСЕ-ВСЕ файлы из директории icons именем icon-*.png Webpack image = require(`@/assets/icons/icon-${iconName}.png`) Vite image = new URL(../assets/icons/icon-${iconName}.png`, import.meta.url).href` Но это должен быть именно путь до файла в вычислении строки, которую можно распарсить. Не другие JS выражение и не шаблон под любые потенциальные файлы. Не будут работать: require(`${icon}`) require(getIconByName(icon)) Подробности: - https://webpack.js.org/guides/asset-management/#loading-images - https://vitejs.dev/guide/assets.html - https://cli.vuejs.org/guide/html-and-static-assets.html#relative-path-imports - https://github.com/vitejs/vite/issues/10597

0

11.07.2023

Alexey Автор вопроса