SThumbnail <s-thumbnail>

A small, fixed-size preview image of a product or file. SThumbnail is the typed Vue 3 wrapper for Shopify's Polaris <s-thumbnail> web component.

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

Best practices

• size="small-200" for the tightest spaces. Reach for it only where room is very limited.
• size="small" for small spaces. Use it when the thumbnail has to fit in a compact area.
• size="base" by default. Start here unless the layout calls for something else.
• size="large" when the image is the focus. Use it when the thumbnail is the main point of attention.

See Shopify's best practices for <s-thumbnail> for the full guidance.

Example

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

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

<template>
  <SThumbnail src="https://picsum.photos/seed/polaris-thumb/100" alt="Product photo" size="small" />
  <SThumbnail src="https://picsum.photos/seed/polaris-thumb/100" alt="Product photo" size="base" />
  <SThumbnail src="https://picsum.photos/seed/polaris-thumb/100" alt="Product photo" size="large" />

  <!-- No src: renders a placeholder -->
  <SThumbnail alt="Product photo not yet uploaded" size="base" />
</template>

Props

Prop	Type	Description
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.
loading	"eager" | "lazy"	Determines the loading behavior of 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.
size	"base" | "small-200" | "small-100" | "small" | "large" | "large-100"	The size of the product thumbnail image. - small-200: Smallest thumbnail size, ideal for compact product lists or tables. - small-100: Very small thumbnail, suitable for dense layouts. - small: Small thumbnail for space-constrained contexts. - base: Default size that balances visibility and space efficiency. - large: Larger thumbnail for featured products or detailed views. - large-100: Extra large thumbnail for prominent product display.
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.

Events

Event	Type
error	CustomEvent
load	CustomEvent

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