SThumbnail <s-thumbnail>

商品或文件的小尺寸、固定大小预览图。 SThumbnail 是 Shopify Polaris <s-thumbnail> web component 的带类型 Vue 3 wrapper。

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

最佳实践

• size="small-200" 用于最狭小的空间。 仅在空间非常有限时使用。
• size="small" 用于较小的空间。 当缩略图需要放进紧凑区域时使用。
• 默认使用 size="base"。 除非布局另有需要，否则从这里开始。
• 当图片是焦点时使用 size="large"。 当缩略图是主要关注点时使用。

参阅 Shopify 关于 <s-thumbnail> 的最佳实践（英文）以获取完整指南。

示例

下方图片从 picsum.photos 加载，这是一个第三方占位图片服务，仅用于演示。

<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	类型	说明
alt	string	描述图片内容的替代文本，帮助读者理解图片的含义。它对使用辅助技术的用户和视力正常的用户都非常有用。写得好的描述能让视障人士参与到非文本内容的获取中。屏幕阅读器遇到 s-image 时，会朗读此描述。如果图片加载失败（可能是由于网络连接较差），屏幕上会改为显示 alt。这样做的好处是，视力正常的买家能知道此处本应加载一张图片，同时作为替代，他们仍然可以获取文本内容。阅读编写替代文本时的注意事项以了解更多。
loading	"eager" | "lazy"	决定图片的加载行为： - eager：立即加载图片，无论其是否位于可见视口内。 - lazy：延迟加载图片，直到它接近视口的指定距离时才加载。
size	"base" | "small-200" | "small-100" | "small" | "large" | "large-100"	商品缩略图的尺寸。 - small-200：最小的缩略图尺寸，适合紧凑的商品列表或表格。 - small-100：非常小的缩略图，适合密集布局。 - small：小缩略图，适合空间受限的上下文。 - base：兼顾可见性和空间效率的默认尺寸。 - large：较大的缩略图，用于精选商品或详细视图。 - large-100：特大缩略图，用于突出展示商品。
src	string	图片来源（远程 URL 或本地文件资源）。当图片正在加载或未提供 src 时，将渲染占位符。

Events

Event	类型
error	CustomEvent
load	CustomEvent

在 <SThumbnail> 上使用 @error 形式的监听器来监听这些事件。