Widget Image

Le widget Image vous permet d’intégrer une image à votre dashboard. Une image désigne un fichier PNG, JPG ou GIF animé accessible depuis une URL.

Configuration

Configuration du widget Image
  1. Saisissez l’URL de votre image.
  2. Choisissez une option d’affichage :
    • Zoom image to cover whole title
    • Fit image on tile
    • Center image on tile

API

Ce widget peut être utilisé avec l’API Dashboards. Le tableau ci-dessous définit le schéma JSON du widget :

Expand All

Champ

Type

Description

has_background

boolean

Whether to display a background or not.

default: true

has_border

boolean

Whether to display a border or not.

default: true

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

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

Pour aller plus loin

Documentation, liens et articles supplémentaires utiles:

PREVIEWING: esther/docs-9478-fix-split-after-example