SImage <s-image>

Muestra una imagen con control sobre la relación de aspecto, el ajuste, los bordes y la carga diferida. SImage es el wrapper de Vue 3 tipado del web component <s-image> de Shopify Polaris.

import { SImage } from 'polaris-vue-elements'

Buenas prácticas

• Usa imágenes nítidas y optimizadas. Elige imágenes de alta resolución que también estén optimizadas para la web.
• Añade imágenes con un propósito. Incluye una imagen solo cuando aclare el contenido o ayude a guiar a los comerciantes.

Consulta las buenas prácticas de Shopify para <s-image> (en inglés) para ver todas las recomendaciones.

Ejemplo

La imagen de abajo se carga desde picsum.photos, un servicio externo de imágenes de marcador de posición, solo con fines de demostración.

<script setup>
import { SImage } from 'polaris-vue-elements'
</script>

<template>
  <SImage
    src="https://picsum.photos/seed/polaris-image/400/300"
    alt="Placeholder scenic photo"
    aspectRatio="4/3"
    inlineSize="fill"
    objectFit="cover"
    borderRadius="200"
    style="width: 220px"
  />
</template>

Props

Prop	Tipo	Descripción
accessibilityRole	"presentation" | "none" | "img"	El significado semántico del contenido del componente. Cuando se establece, las tecnologías de asistencia usan el rol para ayudar a los usuarios a navegar por la página. - none: oculta por completo el elemento y su contenido a las tecnologías de asistencia - presentation: elimina el significado semántico, de modo que la imagen es puramente decorativa y los lectores de pantalla la ignoran. - img: identifica el elemento como una imagen que transmite información relevante a los usuarios.
alt	string	Una descripción de texto alternativo que describe la imagen para que el lector entienda de qué trata. Es extremadamente útil tanto para los usuarios de tecnologías de asistencia como para los usuarios videntes. Una descripción bien redactada permite a las personas con discapacidad visual participar en el consumo de contenido no textual. Cuando un lector de pantalla encuentra un s-image, la descripción se lee y se anuncia en voz alta. Si una imagen no se carga, posiblemente por una mala conexión, se muestra el alt en pantalla en su lugar. Esto tiene la ventaja de que un comprador vidente sabe que aquí debía cargarse una imagen y, como alternativa, puede seguir consumiendo el contenido textual. Lee las consideraciones al escribir texto alternativo para obtener más información.
aspectRatio	${number}` | `${number}/${number}` | `${number}/ ${number}` | `${number} /${number}` | `${number} / ${number}	La relación de aspecto de la imagen. La forma en que se muestra la imagen depende del valor de inlineSize: - inlineSize="fill": se respeta la relación de aspecto y la imagen ocupa el espacio necesario. - inlineSize="auto": la imagen no se muestra hasta que se ha cargado y se ignora la relación de aspecto. Por ejemplo, si el valor se establece como 50 / 100, el getter devuelve 50 / 100. Si el valor se establece como 0.5, el getter devuelve 0.5 / 1. Más información sobre la propiedad aspect-ratio.
border	BorderShorthand	Un borde aplicado con sintaxis abreviada para especificar el ancho, el color y el estilo en una sola propiedad.
borderColor	"subdued" | "base" | "strong"	El color del borde según la escala de colores del sistema de diseño. Cuando se establece, sobrescribe el valor de color especificado en la propiedad border. Elige entre subdued, base o strong según el énfasis visual necesario.
borderRadius	MaybeAllValuesShorthandProperty<BoxBorderRadii>	El redondeo de las esquinas del elemento según la escala de radios del sistema de diseño. Admite la sintaxis de 1 a 4 valores para especificar radios distintos por esquina. Úsalo para crear esquinas redondeadas o elementos completamente redondeados.
borderStyle	"" | MaybeAllValuesShorthandProperty<BoxBorderStyles>	El estilo visual del borde en todos los lados, como sólido, discontinuo o punteado. Cuando se establece, anula el valor de estilo especificado en la propiedad border. Admite la sintaxis de 1 a 4 valores para especificar estilos distintos por lado.
borderWidth	"" | MaybeAllValuesShorthandProperty<"base" | "small-100" | "small" | "large" | "large-100" | "none">	El grosor del borde en todos los lados. Cuando se establece, anula el valor de ancho especificado en la propiedad border. Admite la sintaxis de 1 a 4 valores para especificar anchos distintos por lado.
inlineSize	"auto" | "fill"	El ancho en línea que se muestra de la imagen. - fill: la imagen ocupa el 100 % del tamaño en línea disponible. - auto: la imagen se muestra en su tamaño natural. Más información sobre el atributo width.
loading	"eager" | "lazy"	La estrategia de carga de la imagen. - eager: carga la imagen de inmediato, independientemente de su posición dentro del área visible. - lazy: retrasa la carga de la imagen hasta que se acerca a una distancia determinada del área visible. Más información sobre el atributo loading.
objectFit	"contain" | "cover"	El comportamiento de redimensionamiento de la imagen para ajustarse a su contenedor. - contain: escala la imagen para que quepa en el contenedor manteniendo su relación de aspecto. La imagen completa es visible, pero puede quedar espacio vacío. - cover: escala la imagen para que llene todo el contenedor manteniendo su relación de aspecto. La imagen puede recortarse para ajustarse. La imagen siempre se coloca en el centro del contenedor. Más información sobre la propiedad object-fit.
sizes	string	Un conjunto de condiciones de medios y sus tamaños correspondientes.
src	string	El origen de la imagen (una URL remota o un recurso de archivo local). Mientras la imagen se carga o si no se proporciona src, se muestra un marcador de posición.
srcSet	string	Un conjunto de fuentes de imagen con sus descriptores de ancho o de densidad de píxeles. Reemplaza la propiedad src.

Events

Event	Tipo
error	CustomEvent
load	CustomEvent

Escúchalos con listeners del estilo @error en <SImage>.