Image

Introduction

Name: didomi-image Component type: image

Display an image.

window.didomiConfig = {
...
components: {
layout: {...},
activeComponents: [
{
id: "ID_OF_THE_COMPONENT",
type: "image",
options: {
...,
propKey: "PROP_VALUE" // Remember to use camelCase for the key
}
}
]
}
};

Inline configuration

<didomi-image container-id="CONTAINER_ID" prop-key="PROP_VALUE" .../>

Props Options

Name

Type

Description

alt

String

Alternative attribute of the image

display

String

CSS display property. Example: 'flex', 'inline' ...

src

String

Source of the image.

isShown

Boolean

display/hide the element (default true)

For inline configuration, make sure to use kebab-case syntax. For example fontSize will become font-size.

Examples

Object configuration

window.didomiConfig = {
...
components: {
activeComponents: [
{
id: "section-logo",
type: "image",
options: {
src: "https://www.didomi.io/hubfs/website/general/didomi_logo_dark.svg",
style: {
default: {
width: "100px",
margin: "20px"
}
}
}
}
]
}
};