Всем привет как правильно сделать привязку стилей с бэкграунд картинкой, чтобы

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

10.11.2023

Роман Бандурин

прикольно) а вот еще часто спрашивают как стриггерить событие в соседнем компоненте. Хотелось бы одной командой тоже подобную инструкцию развернуть)

0

10.11.2023

Grigorii K. Shartsev

Роман Бандурин
прикольно) а вот еще часто спрашивают как стриггер...

Как стриггерить событие в соседнем компоненте - очень широкий вопрос, он зависит от того, почему нужно триггерить событие, как компоненты связаны. Общий короткий ответ - "через родителя."

0

10.11.2023

Булат · Accepted Answer

Булат

Мб ../ вначале

0

10.11.2023

169 похожих чатов

Всем привет как правильно сделать привязку стилей с бэкграунд картинкой, чтобы

6 ответов

Похожие вопросы