Gestión de Imágenes en Next.js
Las imágenes desempeñan un papel importante en la apariencia visual de cualquier sitio web. Analicemos cómo agregarlas en Next.js.
El componente <Image> es una versión avanzada de la etiqueta HTML convencional <img> que ofrece una variedad de optimizaciones automáticas. Ha sido diseñado para abordar las complejidades del diseño web moderno y garantiza una experiencia de usuario visualmente estable al mitigar los cambios de diseño durante la fase de carga. El componente también redimensiona las imágenes de manera inteligente, lo que reduce el consumo de ancho de banda en dispositivos con pantallas más pequeñas, optimizando así la entrega de contenido.
Volver al proyecto
Revisemos cómo incorporar imágenes en nuestro proyecto. En la carpeta public, encontrarás hero-desktop.png y hero-mobile.png. Es momento de incluirlas en nuestro archivo app/page.tsx utilizando el componente Image de next/image.
Al navegar a la página principal de la aplicación, la imagen debería ser visible.
Para la versión móvil, agrega otra imagen con un ancho de 560px y una altura de 620px. Si surge algún inconveniente, consulta la solución proporcionada a continuación.
En la práctica
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
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.08Gestión de Imágenes en Next.js
Desliza para mostrar el menú
Las imágenes desempeñan un papel importante en la apariencia visual de cualquier sitio web. Analicemos cómo agregarlas en Next.js.
El componente <Image> es una versión avanzada de la etiqueta HTML convencional <img> que ofrece una variedad de optimizaciones automáticas. Ha sido diseñado para abordar las complejidades del diseño web moderno y garantiza una experiencia de usuario visualmente estable al mitigar los cambios de diseño durante la fase de carga. El componente también redimensiona las imágenes de manera inteligente, lo que reduce el consumo de ancho de banda en dispositivos con pantallas más pequeñas, optimizando así la entrega de contenido.
Volver al proyecto
Revisemos cómo incorporar imágenes en nuestro proyecto. En la carpeta public, encontrarás hero-desktop.png y hero-mobile.png. Es momento de incluirlas en nuestro archivo app/page.tsx utilizando el componente Image de next/image.
Al navegar a la página principal de la aplicación, la imagen debería ser visible.
Para la versión móvil, agrega otra imagen con un ancho de 560px y una altura de 620px. Si surge algún inconveniente, consulta la solución proporcionada a continuación.
En la práctica
¡Gracias por tus comentarios!
