Картинка с другого адреса в Nuxt

Иногда файл лежит не в public, а на CDN или медиасервере партнёра. В src тогда указывают полный URL с протоколом и доменом. Модуль @nuxt/image не пропускает произвольные хосты: иначе любой шаблон мог бы заставить сервер качать чужие адреса. Список доверенных доменов задают в конфигурации проекта.

Допустим, обложка доступна по адресу на images.example.com. Добавим хост в блок image корневого конфига:

export default defineNuxtConfig({
	modules: ['@nuxt/image'],
	image: {
		domains: ['images.example.com'],
	},
});

После перезапуска npm run dev можно вывести удалённый файл компонентом NuxtImg с абсолютным src и теми же атрибутами размера, что и для локальной обложки:

<template>
	<NuxtImg
		src="https://images.example.com/cover.jpg"
		width="400"
		height="300"
		alt="Cover"
	/>
</template>

Домен в src должен совпадать с одной из записей domains без протокола и пути. Другие хосты модуль отклонит, пока их явно не добавят в конфиг. Локальные пути со слэша по-прежнему читаются из public и не требуют записи в списке.

Разрешите домен CDN с логотипом компании и выведите логотип на главной по полному HTTPS-адресу.

Сделайте страницу товара, где фото приходит с внешнего медиахоста, указанного в domains, с английским alt.