Image

O componente Image é usado para exibir imagem de forma lazy, ou seja, só irá carregar a imagem quando a imagem estiver no foco da tela.

Importação

import { Image } from '@escaletech/delta'

Utilização

Editor de código

<Image id="random-image" alt="Imagem aleatória" src="https://picsum.photos/300/300" width={300} height={300} />

<Image
  id="random-image"
  alt="Imagem aleatória"
  src="https://picsum.photos/300/300"
  width={300}
  height={300}
/>

Resultado

Loading...

Placeholder

Você pode adicionar um caminho ou link de imagem enquanto carrega a imagem real pelo atributo placeholder.

Editor de código

<Image id="random-image" alt="Imagem aleatória" src="https://picsum.photos/300/300" width={300} height={300} placeholder="https://picsum.photos/300/300?grayscale" />

<Image
  id="random-image"
  alt="Imagem aleatória"
  src="https://picsum.photos/300/300"
  width={300}
  height={300}
  placeholder="https://picsum.photos/300/300?grayscale"
/>

Resultado

Loading...

Imagens Responsivas

Imagine que você precise utilizar uma imagem com menor qualidade em dispositivos móveis e uma de maior qualidade no desktop. Neste caso, você poderá utilizar esta feature de imagens responsivas.

O componente possui a funcionalidade de imagens responsivas para todos os Breakpoints.

info

A ordem das imagens é um fator importante. Aconselhamos que você ordene as imagens da maior para a menor. Ou seja, a maior imagem será a primeira em sua lista e a menor a última. Não escolhemos esta regra, é apenas uma especificação da tag <picture> e <source>. Para mais informações, verifique a documentação oficial: Responsive Images

Para simular esta feature redimensione a sua tela ou visite o nosso Storybook

Editor de código

<Image images={[ { src: 'https://via.placeholder.com/1280', alt: 'Tudo junto e conectado', width: 338, height: 389, breakpoint: 'md' }, { src: 'https://via.placeholder.com/720', alt: 'Tudo junto e conectado', width: 338, height: 389, breakpoint: 'sm' }, { src: 'https://via.placeholder.com/360', alt: 'Tudo junto e conectado', width: 338, height: 389, breakpoint: 'xs' } ]} responsive />

<Image
  images={[
    {
      src: 'https://via.placeholder.com/1280',
      alt: 'Tudo junto e conectado',
      width: 338,
      height: 389,
      breakpoint: 'md'
    },
    {
      src: 'https://via.placeholder.com/720',
      alt: 'Tudo junto e conectado',
      width: 338,
      height: 389,
      breakpoint: 'sm'
    },
    {
      src: 'https://via.placeholder.com/360',
      alt: 'Tudo junto e conectado',
      width: 338,
      height: 389,
      breakpoint: 'xs'
    }
  ]}
  responsive
/>

Resultado

Loading...

Props

Propriedade	Descrição	Tipo	Padrão	Obrigatório
id	Identificador	string	-	❌
alt	Texto alternativo	string	-	✅
src	Caminho ou link da imagem	string	-	✅
width	Largura da imagem	string	-	❌
height	Altura da imagem	string	-	❌
placeholder	Caminho ou link da imagem de carregamento	string	-	❌
className	Classe CSS	string	-	❌
loading	Especifica se um navegador deve carregar uma imagem imediatamente ou adiar o carregamento	string	lazy	❌
responsive	Renderizará o componente de imagens responsivas	boolean	-	❌

Imagens Responsivas

Propriedade	Descrição	Tipo	Padrão	Obrigatório
images	Lista de imagens responsivas	TImage	-	✅

Aceita todos as propriedades suportados por imagens nativas.