イメージウィジェットを使用すると、ダッシュボードにイメージを埋め込むことができます。イメージには、URLでアクセスできる場所でホストされている PNG、JPG、またはアニメーション GIF を使用できます。
セットアップ
- イメージの URL を入力します。
- 外観を選択します。
- Zoom image to cover whole tile (タイル全体を覆うようにイメージを拡大縮小)
- Fit image on tile (イメージをタイル内に収める)
- Center image on tile (イメージをタイルの中心に配置する)
API
このウィジェットは、ダッシュボード API とともに使用できます。詳しくは、ダッシュボード API ドキュメントをご参照ください。
イメージウィジェットのウィジェット JSON スキーマ定義は次のとおりです。
Expand All
Whether to display a background or not.
default: true
Whether to display a border or not.
default: true
Horizontal alignment.
Allowed enum values: center,left,right
Size of the margins around the image.
Note: small
and large
values are deprecated.
Allowed enum values: sm,md,lg,small,large
How to size the image on the widget. The values are based on the image object-fit
CSS properties.
Note: zoom
, fit
and center
values are deprecated.
Allowed enum values: fill,contain,cover,none,scale-down,zoom,fit,center
Type of the image widget.
Allowed enum values: image
default: image
URL of the image in dark mode.
Vertical alignment.
Allowed enum values: center,top,bottom
{
"has_background": true,
"has_border": true,
"horizontal_align": "string",
"margin": "string",
"sizing": "string",
"type": "image",
"url": "https://example.com/image.png",
"url_dark_theme": "https://example.com/image-dark-mode.png",
"vertical_align": "string"
}
その他の参考資料