Umgang mit Bildern in Next.js
Bilder spielen eine bedeutende Rolle für das visuelle Erscheinungsbild jeder Website. Im Folgenden wird erläutert, wie sie in Next.js hinzugefügt werden können.
Die <Image>
-Komponente ist eine erweiterte Version des herkömmlichen HTML-<img>
-Tags und bietet eine Vielzahl automatischer Optimierungen. Sie wurde entwickelt, um den Anforderungen modernen Webdesigns gerecht zu werden, und sorgt für eine visuell stabile Benutzererfahrung, indem Layoutverschiebungen während der Ladephase minimiert werden. Die Komponente passt Bilder zudem intelligent an, was den Bandbreitenverbrauch auf Geräten mit kleineren Viewports reduziert und somit die Inhaltsauslieferung optimiert.
Zurück zum Projekt
Sehen wir uns an, wie Bilder in unser Projekt eingebunden werden können. Im Ordner public
befinden sich die Dateien hero-desktop.png
und hero-mobile.png
. Diese sollen nun in die Datei app/page.tsx
mit der Image
-Komponente aus next/image
eingefügt werden.
Nach dem Navigieren zur Startseite der App sollte das Bild sichtbar sein.
Für die mobile Version ein weiteres Bild mit einer Breite von 560px
und einer Höhe von 620px
hinzufügen. Bei Problemen kann auf die unten bereitgestellte Lösung zurückgegriffen werden.
In der Praxis
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 2.08
Umgang mit Bildern in Next.js
Swipe um das Menü anzuzeigen
Bilder spielen eine bedeutende Rolle für das visuelle Erscheinungsbild jeder Website. Im Folgenden wird erläutert, wie sie in Next.js hinzugefügt werden können.
Die <Image>
-Komponente ist eine erweiterte Version des herkömmlichen HTML-<img>
-Tags und bietet eine Vielzahl automatischer Optimierungen. Sie wurde entwickelt, um den Anforderungen modernen Webdesigns gerecht zu werden, und sorgt für eine visuell stabile Benutzererfahrung, indem Layoutverschiebungen während der Ladephase minimiert werden. Die Komponente passt Bilder zudem intelligent an, was den Bandbreitenverbrauch auf Geräten mit kleineren Viewports reduziert und somit die Inhaltsauslieferung optimiert.
Zurück zum Projekt
Sehen wir uns an, wie Bilder in unser Projekt eingebunden werden können. Im Ordner public
befinden sich die Dateien hero-desktop.png
und hero-mobile.png
. Diese sollen nun in die Datei app/page.tsx
mit der Image
-Komponente aus next/image
eingefügt werden.
Nach dem Navigieren zur Startseite der App sollte das Bild sichtbar sein.
Für die mobile Version ein weiteres Bild mit einer Breite von 560px
und einer Höhe von 620px
hinzufügen. Bei Problemen kann auf die unten bereitgestellte Lösung zurückgegriffen werden.
In der Praxis
Danke für Ihr Feedback!