Image

Componente de imagen que muestra un sustituto integrado cuando el origen no se puede cargar.

Úsalo cuando necesites una imagen que degrade con elegancia a un marcador de posición si el origen falla: <r-img> cambia a un gráfico de «imagen rota» integrado o al fallback que le des.

Inicio rápido

Uso básico

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

Referencia de la API

Propiedades

Propiedad	Tipo	Por defecto	Descripción
src	string	''	URL de la imagen. Es reactiva: cambiarla tras el montaje recarga la imagen.
alt	string	''	Texto alternativo que se pasa al <img> interno. Vacío la marca como decorativa.
fallback	string	data URI integrado de imagen rota	Imagen que se muestra cuando src no se puede cargar.
sheet	string	''	CSS inyectado en el shadow DOM del componente.

src, alt, fallback y sheet se observan y se actualizan de forma reactiva: cambiar cualquiera de ellos en un elemento ya montado surte efecto de inmediato.

Origen de la imagen src

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

Texto alternativo alt

alt se pasa al <img> interno. Déjalo vacío (el valor por defecto) en las imágenes decorativas para que los lectores de pantalla las omitan, y describe las que aportan significado.

<r-img src="https://picsum.photos/id/1035/240/160" alt="Un lago de montaña al atardecer"></r-img>

Fallo de carga fallback

Cuando src no se puede cargar, el componente cambia a fallback. Si no defines fallback, se usa un marcador de imagen rota integrado. Abajo, src es una URL inválida, así que se muestra la imagen sustituta.

<r-img
  src="https://example.invalid/does-not-exist.png"
  fallback="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...(marcador de imagen rota)..."
></r-img>

Estilos externos sheet

sheet inyecta CSS sin procesar en el shadow DOM del componente. Úsalo para dar estilo al contenedor interno .ran-image o al <img> que hay 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

Ninguno. r-img no despacha eventos personalizados.

Buenas prácticas

• Cambia src cuando quieras: es reactivo, así que actualizarlo en un elemento montado recarga la imagen; el sustituto sigue entrando en juego si la nueva URL falla.
• Da alt a las imágenes con significado: describe el contenido para los lectores de pantalla; deja alt vacío solo en las puramente decorativas.
• Confía en el sustituto integrado: el marcador de imagen rota por defecto se usa automáticamente, pero define tu propio fallback cuando quieras uno acorde a tu marca o al contexto.
• Da estilo con sheet: como la imagen vive en el shadow DOM, usa el atributo sheet (o las variables CSS del componente) para bordes, radio o tamaño.