Manipulação de Imagens no Next.js
Imagens desempenham um papel significativo na aparência visual de qualquer site. Vamos focar em como adicioná-las no Next.js.
O componente <Image> é uma versão avançada da tag HTML <img> convencional que oferece uma variedade de otimizações automáticas. Ele foi projetado para lidar com as complexidades do design web moderno e garante uma experiência visualmente estável ao usuário, mitigando mudanças de layout durante a fase de carregamento. O componente também redimensiona imagens de forma inteligente, o que reduz o consumo de banda em dispositivos com visualizações menores, otimizando assim a entrega do conteúdo.
De volta ao projeto
Vamos conferir como incorporar imagens em nosso projeto. Na pasta public, você encontrará hero-desktop.png e hero-mobile.png. Agora é hora de incluí-las no arquivo app/page.tsx utilizando o componente Image do next/image.
Ao navegar para a página inicial do aplicativo, a imagem deve estar visível.
Para a versão mobile, adicione outra imagem com largura de 560px e altura de 620px. Caso encontre algum problema, consulte a solução fornecida abaixo.
Na Prática
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Awesome!
Completion rate improved to 2.08Manipulação de Imagens no Next.js
Deslize para mostrar o menu
Imagens desempenham um papel significativo na aparência visual de qualquer site. Vamos focar em como adicioná-las no Next.js.
O componente <Image> é uma versão avançada da tag HTML <img> convencional que oferece uma variedade de otimizações automáticas. Ele foi projetado para lidar com as complexidades do design web moderno e garante uma experiência visualmente estável ao usuário, mitigando mudanças de layout durante a fase de carregamento. O componente também redimensiona imagens de forma inteligente, o que reduz o consumo de banda em dispositivos com visualizações menores, otimizando assim a entrega do conteúdo.
De volta ao projeto
Vamos conferir como incorporar imagens em nosso projeto. Na pasta public, você encontrará hero-desktop.png e hero-mobile.png. Agora é hora de incluí-las no arquivo app/page.tsx utilizando o componente Image do next/image.
Ao navegar para a página inicial do aplicativo, a imagem deve estar visível.
Para a versão mobile, adicione outra imagem com largura de 560px e altura de 620px. Caso encontre algum problema, consulte a solução fornecida abaixo.
Na Prática
Obrigado pelo seu feedback!
