Картинка из assets в Nuxt
Давайте изучим картинки, которые
должны пройти через сборку Nuxt.
Их кладут в app/assets: Vite
обрабатывает такие файлы, может
сжать их и подставить в итоговую
выдачу новое имя с хешем для кеша.
На странице нельзя просто написать
в src путь к photo.jpg
внутри assets, как для public.
Файл нужно импортировать в script setup,
а в шаблоне передать результат
в атрибут :src. Префикс ~/
указывает на каталог app, как
в путях к CSS в конфигурации.
После npm run build откроем
инструменты разработчика и посмотрим
на фактический src у тега img:
адрес в браузере не будет равен
исходному имени photo.jpg,
потому что сборка добавляет хеш
к имени файла в выдаче.
Такой способ подходит для иллюстраций
на конкретных страницах, фото
в каталоге и любых изображений,
которые меняются вместе с кодом
компонента. Для логотипа
с постоянным URL чаще используют
public, здесь мы работаем
только с assets. Пример
для photo.jpg:
<script setup>
import photo from '~/assets/photo.jpg';
</script>
<template>
<img :src="photo" alt="Photo">
</template>
Добавьте фото товара в assets
и выведите его на странице
через import и :src.
