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
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 the `className` prop works with the `Image` component?
What should I do if my images are not displaying correctly?
Awesome!
Completion rate improved to 2.08Bilder
Swipe um das Menü anzuzeigen
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
Danke für Ihr Feedback!
