SImage `<s-image>`

显示图片，可控制宽高比、适配方式、边框和懒加载。 SImage 是 Shopify Polaris <s-image> web component 的带类型 Vue 3 wrapper。

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

最佳实践

使用清晰且经过优化的图片。 选择分辨率高、同时针对 Web 进行了优化的图片。
有目的地添加图片。 仅当图片能让内容更清晰或有助于引导商家时才使用。

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

示例

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

vue

<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	类型	说明
`accessibilityRole`	`"presentation" \| "none" \| "img"`	组件内容的语义含义。设置后，辅助技术将使用该 role 帮助用户浏览页面。 - `none`：对辅助技术完全隐藏元素及其内容 - `presentation`：移除语义含义，使图片成为纯装饰性内容并被屏幕阅读器忽略。 - `img`：将元素标识为向用户传达有意义信息的图片。
`alt`	`string`	描述图片内容的替代文本，帮助读者理解图片的含义。它对使用辅助技术的用户和视力正常的用户都非常有用。写得好的描述能让视障人士参与到非文本内容的获取中。屏幕阅读器遇到 `s-image` 时，会朗读此描述。如果图片加载失败（可能是由于网络连接较差），屏幕上会改为显示 `alt`。这样做的好处是，视力正常的买家能知道此处本应加载一张图片，同时作为替代，他们仍然可以获取文本内容。阅读编写替代文本时的注意事项以了解更多。
`aspectRatio`	${number}` \| `${number}/${number}` \| `${number}/ ${number}` \| `${number} /${number}` \| `${number} / ${number}	图片的宽高比。图片的渲染方式取决于 `inlineSize` 的值： - `inlineSize="fill"`：会遵循宽高比，图片会占据所需的空间。 - `inlineSize="auto"`：图片在加载完成前不会渲染，并且会忽略宽高比。例如，如果值设置为 `50 / 100`，getter 返回 `50 / 100`。如果值设置为 `0.5`，getter 返回 `0.5 / 1`。详细了解 aspect-ratio 属性。
`border`	`BorderShorthand`	使用简写语法在单个属性中同时指定宽度、颜色和样式的边框。
`borderColor`	`"subdued" \| "base" \| "strong"`	使用设计系统色阶的边框颜色。设置后，会覆盖 `border` 属性中指定的颜色值。可从 `subdued`、`base` 或 `strong` 中选择，以匹配所需的视觉强调程度。
`borderRadius`	`MaybeAllValuesShorthandProperty<BoxBorderRadii>`	使用设计系统圆角刻度设置元素各角的圆角程度。支持1 到 4 值语法，可为每个角指定不同的圆角半径。用于创建圆角或完全圆形的元素。
`borderStyle`	`"" \| MaybeAllValuesShorthandProperty<BoxBorderStyles>`	所有边的边框样式，例如实线、虚线或点线。设置后，会覆盖 `border` 属性中指定的样式值。支持1 到 4 值语法，可为每条边指定不同的样式。
`borderWidth`	`"" \| MaybeAllValuesShorthandProperty<"base" \| "small-100" \| "small" \| "large" \| "large-100" \| "none">`	所有边的边框粗细。设置后，会覆盖 `border` 属性中指定的宽度值。支持1 到 4 值语法，可为每条边指定不同的宽度。
`inlineSize`	`"auto" \| "fill"`	图片的显示内联宽度。 - `fill`：图片占据 100% 的可用内联尺寸。 - `auto`：图片以其原始尺寸显示。详细了解 width 属性。
`loading`	`"eager" \| "lazy"`	图片的加载策略。 - `eager`：立即加载图片，无论其是否位于可见视口中。 - `lazy`：延迟加载图片，直到其接近距视口的指定距离。详细了解 loading 属性。
`objectFit`	`"contain" \| "cover"`	图片在容器内适配时的缩放行为。 - `contain`：缩放图片使其适应容器，同时保持宽高比。整张图片可见，但可能留有空白。 - `cover`：缩放图片使其填满整个容器，同时保持宽高比。图片可能会被裁剪以适应容器。图片始终位于容器中央。详细了解 object-fit 属性。
`sizes`	`string`	一组媒体条件及其对应的尺寸。
`src`	`string`	图片来源（远程 URL 或本地文件资源）。当图片正在加载或未提供 `src` 时，将渲染占位符。
`srcSet`	`string`	一组图片源及其宽度或像素密度描述符。它会覆盖 `src` 属性。

Events

Event	类型
`error`	`CustomEvent`
`load`	`CustomEvent`

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

SImage <s-image> ​

最佳实践 ​

示例 ​

Props ​

Events ​

SImage `<s-image>`

最佳实践

示例

Props

Events