SImage <s-image>

Exibe uma imagem com controle sobre proporção, ajuste, bordas e carregamento lento. SImage é o wrapper de Vue 3 tipado do web component <s-image> do Shopify Polaris.

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

Boas práticas

• Use imagens nítidas e otimizadas. Escolha imagens de alta resolução que também sejam otimizadas para a web.
• Adicione imagens com um propósito. Inclua uma imagem apenas quando ela deixar o conteúdo mais claro ou ajudar a orientar os lojistas.

Veja as boas práticas da Shopify para <s-image> (em inglês) para todas as recomendações.

Exemplo

A imagem abaixo é carregada de picsum.photos, um serviço externo de imagens de placeholder, apenas para fins de demonstração.

<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	Descrição
accessibilityRole	"presentation" | "none" | "img"	O significado semântico do conteúdo do componente. Quando definido, o papel é usado pelas tecnologias assistivas para ajudar os usuários a navegar pela página. - none: oculta completamente o elemento e seu conteúdo das tecnologias assistivas - presentation: remove o significado semântico, tornando a imagem puramente decorativa e ignorada pelos leitores de tela. - img: identifica o elemento como uma imagem que transmite informações relevantes aos usuários.
alt	string	Uma descrição em texto alternativo que descreve a imagem para que o leitor entenda do que se trata. É extremamente útil tanto para usuários de tecnologias assistivas quanto para usuários que enxergam. Uma descrição bem escrita permite que pessoas com deficiência visual participem do consumo de conteúdo não textual. Quando um leitor de tela encontra um s-image, a descrição é lida e anunciada em voz alta. Se uma imagem não carregar, possivelmente por causa de uma conexão ruim, o alt é exibido na tela no lugar dela. Isso tem a vantagem de informar a um comprador que enxerga que uma imagem deveria carregar ali e, como alternativa, ele ainda consegue consumir o conteúdo textual. Leia as considerações ao escrever texto alternativo para saber mais.
aspectRatio	${number}` | `${number}/${number}` | `${number}/ ${number}` | `${number} /${number}` | `${number} / ${number}	A proporção da imagem. A exibição da imagem depende do valor de inlineSize: - inlineSize="fill": a proporção é respeitada e a imagem ocupa o espaço necessário. - inlineSize="auto": a imagem só é exibida depois de carregada e a proporção é ignorada. Por exemplo, se o valor for definido como 50 / 100, o getter retorna 50 / 100. Se o valor for definido como 0.5, o getter retorna 0.5 / 1. Saiba mais sobre a propriedade aspect-ratio.
border	BorderShorthand	Uma borda aplicada com sintaxe abreviada para especificar a largura, a cor e o estilo em uma única propriedade.
borderColor	"subdued" | "base" | "strong"	A cor da borda usando a escala de cores do design system. Quando definida, substitui o valor de cor especificado na propriedade border. Escolha entre subdued, base ou strong de acordo com a ênfase visual necessária.
borderRadius	MaybeAllValuesShorthandProperty<BoxBorderRadii>	O arredondamento dos cantos do elemento, usando a escala de raio do design system. Suporta a sintaxe de 1 a 4 valores para especificar raios diferentes por canto. Use isto para criar cantos arredondados ou elementos totalmente arredondados.
borderStyle	"" | MaybeAllValuesShorthandProperty<BoxBorderStyles>	O estilo visual da borda em todos os lados, como sólida, tracejada ou pontilhada. Quando definido, sobrescreve o valor de estilo especificado na propriedade border. Suporta a sintaxe de 1 a 4 valores para especificar estilos diferentes por lado.
borderWidth	"" | MaybeAllValuesShorthandProperty<"base" | "small-100" | "small" | "large" | "large-100" | "none">	A espessura da borda em todos os lados. Quando definida, sobrescreve o valor de largura especificado na propriedade border. Suporta a sintaxe de 1 a 4 valores para especificar larguras diferentes por lado.
inlineSize	"auto" | "fill"	A largura em linha exibida da imagem. - fill: a imagem ocupa 100% do tamanho em linha disponível. - auto: a imagem é exibida em seu tamanho natural. Saiba mais sobre o atributo width.
loading	"eager" | "lazy"	A estratégia de carregamento da imagem. - eager: carrega a imagem imediatamente, independentemente da sua posição no viewport visível. - lazy: adia o carregamento da imagem até que ela se aproxime de uma distância especificada do viewport. Saiba mais sobre o atributo loading.
objectFit	"contain" | "cover"	O comportamento de redimensionamento da imagem para caber no contêiner. - contain: dimensiona a imagem para caber no contêiner mantendo a proporção. A imagem inteira fica visível, mas pode sobrar espaço vazio. - cover: dimensiona a imagem para preencher todo o contêiner mantendo a proporção. A imagem pode ser cortada para caber. A imagem fica sempre centralizada no contêiner. Saiba mais sobre a propriedade object-fit.
sizes	string	Um conjunto de condições de mídia e seus tamanhos correspondentes.
src	string	A origem da imagem (uma URL remota ou um recurso de arquivo local). Enquanto a imagem está carregando ou quando nenhum src é fornecido, um placeholder é renderizado.
srcSet	string	Um conjunto de fontes de imagem e seus descritores de largura ou de densidade de pixels. Substitui a propriedade src.

Events

Event	Tipo
error	CustomEvent
load	CustomEvent

Escute-os com listeners no estilo @error em <SImage>.