Image

Componente de imagem que exibe um substituto embutido quando a origem não carrega.

Use quando precisar de uma imagem que degrade com elegância para um espaço reservado se a origem falhar: o <r-img> troca por um gráfico de "imagem quebrada" embutido ou pelo fallback que você indicar.

Início rápido

Uso básico

<r-img src="https://picsum.photos/id/1015/240/160"></r-img>

Referência da API

Propriedades

Propriedade	Tipo	Padrão	Descrição
src	string	''	URL da imagem. Reativa: alterá-la após a montagem recarrega a imagem.
alt	string	''	Texto alternativo repassado ao <img> interno. Vazio a marca como decorativa.
fallback	string	data URI embutido de imagem quebrada	Imagem exibida quando src não carrega.
sheet	string	''	CSS injetado no shadow DOM do componente.

src, alt, fallback e sheet são observados e atualizam de forma reativa: alterar qualquer um deles num elemento já montado tem efeito imediato.

Origem da imagem src

<r-img src="https://picsum.photos/id/1025/240/160"></r-img>

Texto alternativo alt

alt é repassado ao <img> interno. Deixe-o vazio (o padrão) nas imagens decorativas, para que leitores de tela as ignorem, e descreva as que carregam significado.

<r-img src="https://picsum.photos/id/1035/240/160" alt="Um lago de montanha ao entardecer"></r-img>

Falha de carregamento fallback

Quando src não carrega, o componente troca pelo fallback. Se fallback não estiver definido, usa-se um espaço reservado de imagem quebrada embutido. Abaixo, src é uma URL inválida, então a imagem substituta aparece.

<r-img
  src="https://example.invalid/does-not-exist.png"
  fallback="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...(espaço reservado de imagem quebrada)..."
></r-img>

Estilos externos sheet

sheet injeta CSS bruto no shadow DOM do componente. Use-o para estilizar o contêiner interno .ran-image ou o <img> de dentro.

<r-img
  src="https://picsum.photos/id/1043/240/160"
  sheet="img { border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.25); }"
></r-img>

Eventos

Nenhum. O r-img não despacha eventos personalizados.

Boas práticas

• Mude src a qualquer momento: ele é reativo, então atualizá-lo num elemento montado recarrega a imagem; o substituto continua entrando em ação se a nova URL falhar.
• Dê alt às imagens com significado: descreva o conteúdo para leitores de tela; deixe alt vazio apenas nas puramente decorativas.
• Confie no substituto embutido: o espaço reservado padrão é usado automaticamente, mas forneça o seu próprio fallback quando quiser algo alinhado à marca ou ao contexto.
• Estilize com sheet: como a imagem vive no shadow DOM, use o atributo sheet (ou as variáveis CSS do componente) para bordas, raio ou dimensões.