Bilder

Bilder spielen eine bedeutende Rolle im visuellen Erscheinungsbild jeder Website. Lassen Sie uns darauf konzentrieren, wie man sie in Next.js hinzufügt.

Die <Image>-Komponente ist eine erweiterte Version des herkömmlichen HTML-<img>-Tags, die eine Reihe von automatischen Optimierungen bietet. Sie wurde entwickelt, um die Komplexitäten des modernen Webdesigns zu adressieren und sorgt für ein visuell stabiles Benutzererlebnis, indem sie Layoutverschiebungen während der Ladephase mindert. Die Komponente passt Bilder auch intelligent an, was den Bandbreitenverbrauch auf Geräten mit kleineren Ansichtsfenstern reduziert und somit die Inhaltsbereitstellung optimiert.

Zurück zum Projekt

Lassen Sie uns überprüfen, wie wir Bilder in unser Projekt integrieren können. Im public-Ordner finden Sie hero-desktop.png und hero-mobile.png. Es ist an der Zeit, sie in unsere app/page.tsx-Datei mit dem Image-Komponent von next/image einzufügen.

Beim Navigieren zur Startseite der App sollte das Bild sichtbar sein.

Für die mobile Version fügen Sie ein weiteres Bild mit einer Breite von 560px und einer Höhe von 620px hinzu. Wenn Sie auf Probleme stoßen, beziehen Sie sich auf die unten bereitgestellte Lösung.

In der Praxis