No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Componente Image de Next.js

6/19
Recursos

Aportes 2

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Para la imágenes que están guardadas de manera local es decir dentro de la carpeta del proyecto es necesario hacer un import de la ruta de la imagen por ejemplo:

import profilePic from '../public/me.png'

Next.js va a determinar el width y el height de la imagen.
Si se usa una imagen remota si es necesario especificar las dimensiones ya que Next no tiene acceso a la imagen durante el proceso de build.
Aqui dejo el link de la documentación https://nextjs.org/docs/basic-features/image-optimization

⛰️ Imágenes responsivas

Recursos

Apuntes

¿Cómo funciona?

  • Next.js va creando imágenes de diferentes tamaños en el servidor, las cuales según el tamaño del dispositivo se irán cargando
  • Existen servidores los cuales se encargan únicamente de la manipulación de imágenes, los cuales están optimizados para el manejo de imágenes a gran escala
    • Next.js brinda la flexibilidad para el uso de los mismos
📌 **RESUMEN:** Para crear imágenes responsivas se pueden realizar mediante el componente propio de Next.js el cual creará las mismas mediante el servidor de Node.js o también puede delegar este trabajo a servicios especializados en el mismo