SImage `<s-image>`

アスペクト比、フィット、枠線、遅延読み込みを制御して画像を表示します。 SImage は、Shopify Polaris の <s-image> web component 向けの型付き Vue 3 wrapper です。

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

ベストプラクティス

鮮明で最適化された画像を使う。 高解像度で、かつ Web 向けに最適化された画像を選びます。
目的のある画像を追加する。 画像は、コンテンツをわかりやすくしたり、マーチャントを導いたりする場合にだけ含めます。

詳しいガイダンスについては、<s-image> に関する Shopify のベストプラクティス（英語）を参照してください。

例

以下の画像は、デモ目的でのみ、サードパーティのプレースホルダー画像サービスである 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"`	コンポーネントのコンテンツのセマンティックな意味です。設定すると、そのロールは支援技術によって、ユーザーがページ内を移動するのを助けるために使用されます。 - `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`	幅、色、スタイルを 1 つのプロパティでまとめて指定するショートハンド構文で適用するボーダーです。
`borderColor`	`"subdued" \| "base" \| "strong"`	デザインシステムのカラースケールを使用したボーダーの色です。設定すると、`border` プロパティで指定された色の値よりも優先されます。必要な視覚的強調に合わせて、`subdued`、`base`、`strong` から選択してください。
`borderRadius`	`MaybeAllValuesShorthandProperty<BoxBorderRadii>`	デザインシステムの角丸スケールを使用した要素の角の丸みです。角ごとに異なる半径を指定するための 1〜4 値の構文をサポートします。角丸や完全に丸い要素を作成するために使用します。
`borderStyle`	`"" \| MaybeAllValuesShorthandProperty<BoxBorderStyles>`	すべての辺のボーダーの視覚的なスタイル（solid、dashed、dotted など）です。設定すると、`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