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
How does the `Image` component handle different screen sizes?
Can you explain how to use the `className` prop for responsive images?
What should I do if my images are not displaying correctly?
Awesome!
Completion rate improved to 2.08Umgang 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!
