Image

Introduction

Name: didomi-image Component type: image

Display an image.

Object configuration

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

Inline configuration

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

Props

Name

Type

Description

id

String

If you decide to configure your component in the didomiConfig object, you can use this id to link your component to your configuration object. See this section for more information

src

String

Source of the image.

alt

String

Alternative attribute of the image

style

Object

See this section for style information

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/static/assets/logo.svg",
style: {
default: {
width: "100px",
margin: "20px"
}
}
}
}
]
}
};
<didomi-image id="section-logo" />

Inline configuration

<didomi-image
src='https://www.didomi.io/static/assets/logo.svg'
style='{"default":{"width": "100px", "margin": "20px"}}'
/>