イメージウィジェット

イメージウィジェットを使用すると、ダッシュボードにイメージを埋め込むことができます。イメージには、URLでアクセスできる場所でホストされている PNG、JPG、またはアニメーション GIF を使用できます。

セットアップ

イメージのセットアップ
  1. イメージの URL を入力します。
  2. 外観を選択します。
    • Zoom image to cover whole tile (タイル全体を覆うようにイメージを拡大縮小)
    • Fit image on tile (イメージをタイル内に収める)
    • Center image on tile (イメージをタイルの中心に配置する)

API

このウィジェットは、ダッシュボード API とともに使用できます。詳しくは、ダッシュボード API ドキュメントをご参照ください。

イメージウィジェットのウィジェット JSON スキーマ定義は次のとおりです。

Expand All

フィールド

種類

説明

has_background

boolean

Whether to display a background or not.

has_border

boolean

Whether to display a border or not.

horizontal_align

enum

Horizontal alignment. Allowed enum values: center,left,right

margin

enum

Size of the margins around the image. Note: small and large values are deprecated. Allowed enum values: sm,md,lg,small,large

sizing

enum

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 [required]

enum

Type of the image widget. Allowed enum values: image

url [required]

string

URL of the image.

url_dark_theme

string

URL of the image in dark mode.

vertical_align

enum

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"
}

その他の参考資料

お役に立つドキュメント、リンクや記事:

JSON を使用したダッシュボードの構築ドキュメント more more