Image Component

THIS PAGE
Introduction
Configuration Options
Triggers
Theme Options

Introduction

The image component can be used to show an image. This image can be upload or can be pulled in from a url.

Screenshot

Configuration Options

Datasource

Expected Type: URL

The image to show. Either click on upload to quickly upload an image or alternatively, input a url that points to an image.

Object Fit

Expected Type: fill | contain | cover | none

The behaviour if the aspect ratio of the image is different from the aspect ratio of the component.

Triggers

  • Click: Triggers whenever the image is clicked.
  • Double Click: Triggers whenever the image is clicked twice in quick succession.
  • Right Click: Triggers whenever the image is right-clicked.
  • Mouse Enter: Triggers whenever the mouse starts hovering over the component.
  • Mouse Leave: Triggers whenever the mouse stops hovering over the component.

Theme Options

  • Object Fit: How the image should fill the container. For example, cover makes sure the image takes up all of the space, contain makes sure the image is fully visible and maintains its aspect ratio. (contain | cover | fill | none)
  • Aspect Ratio: The expected aspect ratio for the image. (16/9 | 4/3 | etc)
  • Padding: The image's padding. (Number | Pixels)
  • Shadow: The image's shadow. (Shadow)
  • Border: The image's border. You can also specify the radius for the edges. (Border)
  • Background Color: The image's background color. (String | Hex)
Did you find what you were looking for?
👍
👎
What went wrong?
Need more help?We have a thriving Discordcommunity that can help you with all things Canonic. →