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 4

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

Siguiendo la documentaci贸n agregu茅 el par谩metro objectFit=鈥榗over鈥.

<code> <Image src={image.url} width={460} height={460} layout='responsive' objectFit='cover' />

next.config.js 鈫

const config = {
  future: {
    webpack5: true,
  },
  images: {
    //especificamos los dominios q queremos optimizar
    domains: ['images.ctfassets.net']
  }
}