Stripe Apps の Img コンポーネント

Img UI コンポーネントを使用して画像を表示します。

SDK バージョン

アプリに画像を追加するには、以下のようにします。

Img コンポーネントをインポートします。

import {Img} from '@stripe/ui-extension-sdk/ui';

アプリのマニフェストの content_security_policy の image-src セクションに、組み込むすべての画像のベース URL を含めます。

以下は、それぞれの Img タグが下に付いている画像のプレビューです。

サンプルを読み込み中...

<Img
  src="https://images.example.com/gross-volume.svg"
  width="484"
  height="207"
  alt="Gross volume"
/>

Img プロパティ

プロパティー	タイプ
`alt`	オプション `string \| undefined` 画像の代替テキスト。
`crossOrigin`	オプション `"anonymous" \| undefined` 画像のクロスオリジンのサポート。
`height`	オプション `(string \| number) \| undefined` 画像の高さ。
`sizes`	オプション `string \| undefined` 画像のサイズ (srcSet で使用)。
`src`	オプション `string \| undefined` 画像のソース。
`srcSet`	オプション `string \| undefined` 画像のソースセット。
`width`	オプション `(string \| number) \| undefined` 画像の幅。

SrcSet

srcSet は、レスポンシブ画像に使用できます。

次の例では、size 属性を使用して、指定された画像の最大幅を定義しています。

サンプルを読み込み中...

<Img
  srcSet="https://images.example.com/daily-sales.jpg 480w, https://images.example.com/daily-sales-large.jpg 800w"
  sizes="(max-width: 600px) 480px, 800px"
  width="484"
  height="207"
  alt="Daily sales"
/>

データ URL

画像を UI 拡張コードと同じ場所に配置して、Img コンポーネントに直接読み込むことができます。サポートされている形式は、GIF、JPEG、SVG、PNG、WEBP です。

アイコンや他の方法でイラストを探す場合など、一般的なユースケースの大半で SVG を使用することをお勧めします。画像のサフィックスを require ステートメントまたは import ステートメントに含める必要があります。

サンプルを読み込み中...

import {Img} from '@stripe/ui-extension-sdk/ui';
import CommunityIcon from './community-icon.svg';

const DataURl = () => (
  <Img width="75" height="75" src={CommunityIcon} alt="Community" />
)

スタイリング

You can achieve certain styling effects for Img components by wrapping them with a styled Box component.

境界線

To add a border to an Img, use the CSS keyline property, along with width and display to contain the image:

サンプルを読み込み中...

<Box
  css={{
    keyline: 'critical',
    width: 'fit',
    stack: 'x',
  }}
>
  <Img
    src="https://images.example.com/gross-margin.svg"
    width="484"
    height="207"
    alt="Gross margin"
  />
</Box>

角丸

Img に角丸を追加するには、overflow、width、display とともに、CSS borderRadius プロパティを使用して、画像を含めます。

サンプルを読み込み中...

<Box
  css={{
    borderRadius: 'rounded',
    overflow: 'hidden',
    width: 'fit',
    stack: 'x',
  }}
>
  <Img
    src="https://images.example.com/gross-margin.svg"
    width="484"
    height="207"
    alt="Gross margin"
  />
</Box>

注

Stripe Apps の Img コンポーネント

Img UI コンポーネントを使用して画像を表示します。

Img プロパティ

SrcSet

データ URL

スタイリング

境界線

角丸

参照情報