CustomImage - Yampi Developer Portal

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

Propriedade	Tipo	Obrigatória	Valor padrão	Descrição
`src`	`String`	✅	—	URL da imagem.
`lazyload`	`Boolean`	❌	`true`	Ativa o lazy loading via `IntersectionObserver`.
`thumbor`	`Object\|undefined`	❌	`undefined`	Configuração de recorte e redimensionamento via Thumbor (ex.: `{ width: 400, height: 400 }`).
`thumborEnabled`	`Boolean`	❌	`true`	Quando `false`, desativa a otimização Thumbor e usa a URL original.
`placeholderWidth`	`Number`	❌	`0`	Largura em pixels do skeleton exibido antes do carregamento.
`placeholderHeight`	`Number`	❌	`0`	Altura em pixels do skeleton exibido antes do carregamento.
`listInStore`	`Boolean`	❌	`false`	Registra a imagem no Vuex para controle de estado de carregamento.

Eventos

Evento	Descrição
`click`	Disparado ao clicar na imagem.
`onError`	Disparado quando a imagem falha ao carregar.

⌘I