Next.js - 구성 요소를 최대화할 수 있는 Como obter<img/>

A maioria faz uso do <Image/> componente do Next.js sozinho e sem nenhuma configuração adicional, assumindo que as imagens são otimizadas ao máximo por conta própria, o que está errado!

Sim, usando o <Image/> componente, você obtém algum nível de otimização de imagem, mas pode ser otimizado ainda mais com base em vários fatores.

우산도 imagens locais

Ao usar imagens locais, você pode simplesmente importá -las de sua 파스타 pública e, como esta é uma imagem local, você pode pular adicionando a altura e a largura, pois o Next JS descobrirá durante o tempo de compila

import localImage from "../public/mountains.jpg";
import Image from "next/image";

<section>
  <Image
    src={localImage}
    alt="Picture of the author"
  />
</section>

우산도 Imagens Remotas

Ao falar sobre imagens remotas, entendemos claramente que precisaremos de uma string de URL de imagem que vá para src={'image-url'} , mas você também deve entender que o Next.js não tem acesso a esta imagem acesso a esta imagem acesso a esta não tem acesso a esta imagem emquen saberá a largura e altura da imagem e, portanto, precisaremos fornecer a altura e a largura da imagem que precisamos.

const remoteImage = "your-image-url"

<section>
  <Image
    src={remoteImage}
    alt="Picture of the author"
    width={400}
    height={500}
  />
</section>

Imagens Remotas(com desfoque ao carregar)

Na maioria das vezes, você poderá ver um espaço vazio antes que a imagem seja carregada, e fica pior quando você precisa carregar um grande número de imagens de uma só vez, e isso para zer uma experiê se isso é onde a propriedade blurDataURL e placeholder entra na imagem.placeholder será definido como blur para que o efeito de desfoque aconteça antes que os dados completos da imagem sejam obtidos e blurDataURL será uma imagem codificada em base image64 e ser ampliado como espaço reservado para o efeito de carregamento borrado.

⚠ Nota para imagens locais, você só precisará usar a propriedade placeholder com ela definida como blur e o blurDataURL pode ser ignorado, o próximo JS farás no bastidores

export const getStaticProps = async () => {
  const remoteImage =
  "https://images.unsplash.com/photo-1525824236856-8c0a31dfe3be?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fHdhdGVyZmFsbHxlbnwwfHwwfHw%3D";
  const { base64, img } = await getPlaiceholder(remoteImage, { size: 10 });

  return {
    props: {
      imageProps: { ...img, blurDataURL: base64, remoteImage },
    },
  };
};

<!-- The imageProps comes from the page component as props, check out the github repo attached in the article for details -->
<Image
  src={imageProps.remoteImage}
  alt="Picture of the author"
  blurDataURL={imageProps.blurDataURL}
  placeholder="blur"
  width={200}
  height={250}
/>

배치도

O comportamento do layout da imagem conforme a janela de Visualização muda de tamanho.

Quando intrinsic, 이미지 reduzirá as dimensões para viewports menores, mas manterá as dimensões originais para viewports maiores.

Quando fixed , as dimensões da imagem não serão alteradas à medida que a janela de visualização for alterada (sem capacidade de resposta) semelhante ao img elemento

Quando responsive, a imagem reduzirá as dimensões para viewports menores e aumentará para viewports maiores. Certifique-se de que o elemento pai use display: block em sua folha de estilo.

Quandofill, dimensões do elemento pai, desde que o elemento pai seja relativo와 같은 이미지. Isso geralmente é emparelhado com a objectFit 독점. Certifique-se de que o elemento pai tenha position: relative em sua folha de estilo.

이미지의 결정에 대한 통제

A qualidade da imagem otimizada, um número inteiro entre 1 e 100 onde 100 e a melhor qualidade. Padrões para 75 .

<section>
  <h2>5. Local Images (Quality of the images [1-100])</h2>
  <div>
    <p>Image with the quality set to its lowest (1)</p>
    <Image
      src={localImage}
      alt="Picture of the author"
      width={800}
      height={500}
      quality={1}
    />
  </div>
  <div>
    <p>Image with the quality set to its maximum (100)</p>
    <Image
      src={localImage}
      alt="Picture of the author"
      width={800}
      height={500}
      quality={100}
    />
  </div>
</section>

Portanto, essas são as 5 principais maneiras pelas quais você pode fazer bom uso de <Image /> do Next.js

Fontes onde pesquisei esse conteúdo:

https://nextjs.org/docs/api-reference/next/image

https://nextjs.org/docs/basic-features/image-optimization