Gestion des Images dans Next.js
Les images jouent un rôle important dans l'apparence visuelle de tout site web. Concentrons-nous sur la manière de les intégrer dans Next.js.
Le composant <Image> est une version avancée de la balise HTML <img> classique qui propose une gamme d’optimisations automatiques. Il a été conçu pour répondre aux complexités du design web moderne et garantit une expérience utilisateur visuellement stable en limitant les décalages de mise en page pendant le chargement. Ce composant redimensionne également les images de manière intelligente, ce qui réduit la consommation de bande passante sur les appareils dotés de petits écrans, optimisant ainsi la diffusion du contenu.
Retour au projet
Voyons comment intégrer des images dans notre projet. Dans le dossier public, vous trouverez hero-desktop.png et hero-mobile.png. Il est temps de les inclure dans notre fichier app/page.tsx en utilisant le composant Image de next/image.
En accédant à la page d'accueil de l'application, l'image doit être visible.
Pour la version mobile, ajouter une autre image avec une largeur de 560px et une hauteur de 620px. En cas de problème, consulter la solution fournie ci-dessous.
En pratique
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
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.08Gestion des Images dans Next.js
Glissez pour afficher le menu
Les images jouent un rôle important dans l'apparence visuelle de tout site web. Concentrons-nous sur la manière de les intégrer dans Next.js.
Le composant <Image> est une version avancée de la balise HTML <img> classique qui propose une gamme d’optimisations automatiques. Il a été conçu pour répondre aux complexités du design web moderne et garantit une expérience utilisateur visuellement stable en limitant les décalages de mise en page pendant le chargement. Ce composant redimensionne également les images de manière intelligente, ce qui réduit la consommation de bande passante sur les appareils dotés de petits écrans, optimisant ainsi la diffusion du contenu.
Retour au projet
Voyons comment intégrer des images dans notre projet. Dans le dossier public, vous trouverez hero-desktop.png et hero-mobile.png. Il est temps de les inclure dans notre fichier app/page.tsx en utilisant le composant Image de next/image.
En accédant à la page d'accueil de l'application, l'image doit être visible.
Pour la version mobile, ajouter une autre image avec une largeur de 560px et une hauteur de 620px. En cas de problème, consulter la solution fournie ci-dessous.
En pratique
Merci pour vos commentaires !
