Skip to main content
Componente de imagem otimizado para performance. Suporta lazy loading via IntersectionObserver, otimização automática de dimensões e formato via Thumbor, e exibe um placeholder enquanto a imagem carrega ou em caso de erro.

​
Uso

Uso básico: 
<CustomImage src="https://cdn.yampi.com.br/imagem.jpg" />
Com Thumbor e dimensões: 
<CustomImage
  src="https://cdn.yampi.com.br/imagem.jpg"
  :thumbor="{ width: 400, height: 400 }"
  :thumbor-enabled="true"
  :placeholder-width="400"
  :placeholder-height="400"
/>

​
Propriedades

PropriedadeTipoObrigatóriaValor padrãoDescrição
srcString✅—URL da imagem.
lazyloadBoolean❌trueAtiva o lazy loading via IntersectionObserver.
thumborObject|undefined❌undefinedConfiguração de recorte e redimensionamento via Thumbor (ex.: { width: 400, height: 400 }).
thumborEnabledBoolean❌trueQuando false, desativa a otimização Thumbor e usa a URL original.
placeholderWidthNumber❌0Largura em pixels do skeleton exibido antes do carregamento.
placeholderHeightNumber❌0Altura em pixels do skeleton exibido antes do carregamento.
listInStoreBoolean❌falseRegistra a imagem no Vuex para controle de estado de carregamento.

​
Eventos

EventoDescrição
clickDisparado ao clicar na imagem.
onErrorDisparado quando a imagem falha ao carregar.