画像
画像を表示するコンポーネントです。画像はURLを使って送信できます。
Request Content {#image-request-parameter}
| パラメータ | タイプ | 説明 |
|---|---|---|
| type | string | "image" required |
| url | string | 画像の URL (PNG 形式、HTTPS のみ可能) 最大文字数：1,000 文字 required |
| flex | number | 親要素内における、このコンポーネントの幅または高さの比率 詳しくは、レイアウト > コンポーネントの幅と高さ を参照してください。 |
| margin | string | 親要素内での、特定のコンポーネントとその前のコンポーネントとの間に挿入される余白の最小サイズ 詳しくは、レイアウト > コンポーネントの margin プロパティ を参照してください。 |
| position | string | offsetTop、offsetBottom、offsetStart、offsetEnd の基準 以下のいずれかの値を指定します。 • relative : 直前のボックスを基準とします。 • absolute : 親要素の左上を基準とします。 デフォルト値は relative です。 詳しくは、レイアウト > オフセット を参照してください。 |
| offsetTop | string | 上側のオフセット 詳しくは、レイアウト > オフセット を参照してください。 |
| offsetBottom | string | 下側のオフセット 詳しくは、レイアウト > オフセット を参照してください。 |
| offsetStart | string | 左側のオフセット 詳しくは、レイアウト > オフセット を参照してください。 |
| offsetEnd | string | 右側のオフセット 詳しくは、レイアウト > オフセット を参照してください。 |
| align | string | 水平方向の配置方法 詳しくは、レイアウト > 水平方向の配置 を参照してください。 |
| gravity | string | 垂直方向の配置方法 詳しくは、レイアウト > 垂直方向の配置 を参照してください。 |
| size | string | 画像の最大幅 xxs、xs、sm、md、lg、xl、xxl、3xl、4xl、5xl、full のいずれかの値を指定できます。 列挙した順に画像のサイズが大きくなります。 デフォルト値は md です。 |
| aspectRatio | string | 画像のアスペクト比 {width}:{height} の形式で指定します。 {width} と {height} の値は 1 から 100,000 の範囲で指定します。 ただし、{height} 値は {width} の 3 倍を超えることはできません。 デフォルト値は 1:1 です。 |
| aspectMode | string | 画像のアスペクト比と aspectRatio プロパティに指定されたアスペクト比が一致しない場合の、画像の表示方式 詳しくは、描画領域について を参照してください。 |
| action | object | 画像をタップすると実行されるアクション Action Object を指定します。 |
描画領域について {#rendering-area}
size プロパティで画像の最大幅を指定し、aspectRatio プロパティで画像のアスペクト比（横：縦の比率）を指定すると、描画が表示される領域を定義できます。size および aspectRatio プロパティにより指定された四角形のエリアを描画領域といいます。この描画領域に画像が表示されます。
- flex プロパティで指定された画像の幅が size により算出されたコンポーネントの幅よりも大きい場合には、描画領域の幅はコンポーネントの幅に縮小されます。
- 画像のアスペクト比が aspectRatio プロパティにより指定されたアスペクト比と一致しない場合には、aspectMode プロパティに合わせて画像が表示されます。デフォルト値は fit です。
- aspectMode プロパティの値が cover の場合：描画領域全体に画像が表示されます。ただし、描画領域に入りきらない部分は表示されません。
- aspectMode プロパティの値が fit の場合：描画領域全体に画像が表示されます。垂直画像の左右や水平画像の上下にある使用されないエリアには、背景が表示されます。
Request Example {#image-request-example}
{ "type": "bubble", "body": { "type": "box", "layout": "horizontal", "contents": [ { "type": "image", "url": "https://developers.worksmobile.com/image/jp/bot/message_type/LINEWORKS.png", "size": "full", "aspectRatio": "2:1" } ] }}