SImage <s-image>

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

Example

The image below loads from picsum.photos, a third-party placeholder image service, purely for demo purposes.

<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	Type	Description
accessibilityRole	"presentation" | "none" | "img"	The semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page. - none: Completely hides the element and its content from assistive technologies - presentation: Removes semantic meaning, making the image purely decorative and ignored by screen readers. - img: Identifies the element as an image that conveys meaningful information to users.
alt	string	An alternative text description that describe the image for the reader to understand what it is about. It is extremely useful for both users using assistive technology and sighted users. A well written description provides people with visual impairments the ability to participate in consuming non-text content. When a screen readers encounters an s-image, the description is read and announced aloud. If an image fails to load, potentially due to a poor connection, the alt is displayed on screen instead. This has the benefit of letting a sighted buyer know an image was meant to load here, but as an alternative, they’re still able to consume the text content. Read considerations when writing alternative text to learn more.
aspectRatio	${number}` | `${number}/${number}` | `${number}/ ${number}` | `${number} /${number}` | `${number} / ${number}	The aspect ratio of the image. The rendering of the image will depend on the inlineSize value: - inlineSize="fill": the aspect ratio will be respected and the image will take the necessary space. - inlineSize="auto": the image will not render until it has loaded and the aspect ratio will be ignored. For example, if the value is set as 50 / 100, the getter returns 50 / 100. If the value is set as 0.5, the getter returns 0.5 / 1. Learn more about the aspect-ratio property.
border	BorderShorthand	A border applied using shorthand syntax to specify width, color, and style in a single property.
borderColor	"subdued" | "base" | "strong"	The color of the border using the design system's color scale. When set, this overrides the color value specified in the border property. Choose from subdued, base, or strong to match the visual emphasis needed.
borderRadius	MaybeAllValuesShorthandProperty<BoxBorderRadii>	The roundedness of the element's corners using the design system's radius scale. Supports 1-to-4-value syntax for specifying different radii per corner. Use this to create rounded corners or fully rounded elements.
borderStyle	"" | MaybeAllValuesShorthandProperty<BoxBorderStyles>	The visual style of the border on all sides, such as solid, dashed, or dotted. When set, this overrides the style value specified in the border property. Supports 1-to-4-value syntax for specifying different styles per side.
borderWidth	"" | MaybeAllValuesShorthandProperty<"base" | "small-100" | "small" | "large" | "large-100" | "none">	The thickness of the border on all sides. When set, this overrides the width value specified in the border property. Supports 1-to-4-value syntax for specifying different widths per side.
inlineSize	"auto" | "fill"	The displayed inline width of the image. - fill: the image will take up 100% of the available inline size. - auto: the image will be displayed at its natural size. Learn more about the width attribute.
loading	"eager" | "lazy"	The loading strategy for the image. - eager: Immediately loads the image, irrespective of its position within the visible viewport. - lazy: Delays loading the image until it approaches a specified distance from the viewport. Learn more about the loading attribute.
objectFit	"contain" | "cover"	The image resizing behavior to fit within its container. - contain: Scales the image to fit within the container while maintaining its aspect ratio. The entire image is visible, but might leave empty space. - cover: Scales the image to fill the entire container while maintaining its aspect ratio. The image might be cropped to fit. The image is always positioned in the center of the container. Learn more about the object-fit property.
sizes	string	A set of media conditions and their corresponding sizes.
src	string	The image source (either a remote URL or a local file resource). When the image is loading or no src is provided, a placeholder will be rendered.
srcSet	string	A set of image sources and their width or pixel density descriptors. This overrides the src property.

Events

Event	Type
error	CustomEvent
load	CustomEvent

Listen for these with @error-style listeners on <SImage>.