Импортировать изображения и включать их в NextJS
В чем разница между импортом изображения и его непосредственным включением при использовании next/image в NextJS?
import logo from './logo.png';
<Image src = {logo} />
/* versus */
<Image src = {'/logo.png'} />
(Псевдокод для иллюстративных целей, синтаксически некорректен)
Есть ли какие-либо оптимизации скорости или дополнительные функции, когда вы делаете это так или иначе? Синтаксис import заставляет меня думать, что во время сборки происходит что-то еще, но я не могу найти никаких дополнительных подробностей.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Взгляните на документы:
Должно быть одно из следующих:
- Статически импортированный файл изображения
- Строка пути. Это может быть либо абсолютный внешний URL-адрес, либо внутренний путь в зависимости от свойства загрузчика.
- При использовании внешнего URL-адреса его необходимо добавить в RemotePatterns в файле next.config.js.
И здесь о локальных и удаленных изображениях.
Короче говоря:
import logo from './logo.png';
<Image src = {logo} />
файл logo.png, хранящийся рядом с компонентом, из которого вы его импортировали. во время процесса сборки next.js переместит его в папку dist, определит атрибуты width и height изображения и установит его в компонент. это поможет избежать смещения макета из-за загрузки изображения.
Когда вы указываете статический путь к изображению:
<Image src = {'/logo.png'} />
Далее вы по сути сообщаете, что это удаленный образ, и его следует загрузить либо из следующей общей папки, либо из удаленного места. (в случае /logo.png для отображения изображение должно находиться здесь: public/logo.png). В этом случае вам следует либо установить свойства ширины и высоты изображения вручную, либо настроить удаленные шаблоны, если вы хотите включить следующую оптимизацию изображения.
ХОРОШО. Мне бы хотелось
<Image src = {require('./logo.png').default} />, чтобы можно было поместить изображение рядом с файлом компонента, не давая ему имени.