В webpack работало так: <inline-svg :src="require(@assets/img/flags/${$i18n.locale}.svg)" /> Перенес проект на Vite и

там нет поддержки require, добавил ее с помощью vite-plugin-require-transform но он не умеет решать такие пути (ему нужно точное значение переменной заранее иначе получается import из пустоты и вылетает ошибкой).

Есть еще много способ но все они ебола какая то... отдельно импортировать картинки, картинки превратить в компоненты и пр... самый идеальный способ думаю 1й как в вебпаке делал, как его починить ?

в доке вита есть готовые примеры, зачем какие-то дополнительные плагины еще ставить для этого

!src

Почему такой код не работает? Картинка точно есть по этому, и без переменной работает! 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

inline-svg требует уже строку в src, require заменяется на строку, плагин ставил для поддержки require (путем добавления импорта выше). + нужна поддержка alias и ssr (не все варианты это поддерживают). А если уходить в импорты то всякая большая ебола с асинхронкой начинается по типу создания отдельных компонентов под картинки.

Четвертый пункт в лонгриде выше подходит и почти аналогичен require из вебпака

URL не работает в ssr

Сделай импорт на каждую иконку (можно сгенерировать)

Это сработает но плохой вариант, так лет 100 уже не делаю. Хочу починить <inline-svg :src="require(@assets/img/flags/${$i18n.locale}.svg)" /> и не париться.

сделай глоб импорт своих картинок и доставай по ключу нужную, если не хочется с промисами возиться, то есть eager: true, он тебе зарезолвит сразу строку

Можно где то алиасы взять внутри приложения ? Он в ключах уже разресолвеные пути возвращает.

?

так проверяй просто через .endsWith, необязательно целый путь указывать в ключе

Уже. В идеале точное совпадение знать.

для чего именно? даже если большая вложенность, то можно указать путь от /assets, там уж точно проблем не будет