Image
Diese Komponente stellt ein Bild dar.
Konfiguration
Für allgemeine Konfigurations-Optionen siehe Allgemeine Komponenten Konfiguration.
Spezifische Konfiguration
src
(string)-
URL des Bildes.
encodedData
(string)-
Base64 encodiertes String des Bildes. Kann anstatt von
src
verwendet werden. mimeType
(string)-
Mime Type des Bildes. Dieses Feld ist nur erforderlich, wenn
encodedData
angegeben wird. width
(number)-
Breite des Bildes.
height
(number)-
Höhe des Bildes.
Entweder |
Beispiel
image.json
{
"metaData": {
"author": "Virtimo AG",
"name": "Test - Form with images",
"id": "1632436220282",
"version": 1
},
"components": [
{
"type": "container",
"label": "TEST FORM",
"icon": "fab fa-wpforms",
"layout": "vertical",
"components": [
{
"type": "html",
"value": "/data/text1"
},
{
"type": "image",
"encodedData": "iVBORw0KGgoAAAANSUhEUgAAAOwAAADsCAYAAAB300oUAAAACXBIWXMAAC4jAAAuIwF4pT92AAAMUGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIiB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKE1hY2ludG9zaCkiIHhtcDpDcmVhdGVEYXRlPSIyMDE4LTAxLTEyVDE0OjU3OjM4KzAxOjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE4LTAzLTAxVDE0OjMyOjU3KzAxOjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOC0wMy0wMVQxNDozMjo1NyswMTowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Nzk1ODRlYWYtNDFmYi00MzFmLWI3YmUtMzc4MjE0NzI2NjBkIiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6MzZmMWY4OTQtMjk3Ni1lMjQzLWJlNzYtZWE3NDM4NTFhYWEyIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NGM5MmFhODQtMjA3ZC00YzM5LWE5NjktZjM4NzMyNTNlY2M5IiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiIHRpZmY6T3JpZW50YXRpb249IjEiIHRpZmY6WFJlc29sdXRpb249IjMwMDAwMDAvMTAwMDAiIHRpZmY6WVJlc29sdXRpb249IjMwMDAwMDAvMTAwMDAiIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiIGV4aWY6Q29sb3JTcGFjZT0iMSIgZXhpZjpQaXhlbFhEaW1lbnNpb249IjIzNiIgZXhpZjpQaXhlbFlEaW1lbnNpb249IjIzNiI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NGM5MmFhODQtMjA3ZC00YzM5LWE5NjktZjM4NzMyNTNlY2M5IiBzdEV2dDp3aGVuPSIyMDE4LTAxLTEyVDE0OjU3OjM4KzAxOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNyAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6OGE3ODczNDEtMmRmZS00NzE5LTg2ZGMtZjc0ZmI1MDc2MzY2IiBzdEV2dDp3aGVuPSIyMDE4LTAxLTEyVDE1OjAxOjI0KzAxOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNyAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY29udmVydGVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJmcm9tIGltYWdlL2pwZWcgdG8gYXBwbGljYXRpb24vdm5kLmFkb2JlLnBob3Rvc2hvcCIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iZGVyaXZlZCIgc3RFdnQ6cGFyYW1ldGVycz0iY29udmVydGVkIGZyb20gaW1hZ2UvanBlZyB0byBhcHBsaWNhdGlvbi92bmQuYWRvYmUucGhvdG9zaG9wIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo5MjFjNzg5NC04MWMxLTQ5OTctYjc0NC04NDY0OTE2ZmY2NTYiIHN0RXZ0OndoZW49IjIwMTgtMDEtMTJUMTU6MDE6MjQrMDE6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE3IChNYWNpbnRvc2gpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo1ZTE0NjY1MS1mOWFiLTRhYzUtOWIyOS05NTBiNTQ3ODcxYTAiIHN0RXZ0OndoZW49IjIwMTgtMDMtMDFUMTQ6MzI6NTcrMDE6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY29udmVydGVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJmcm9tIGFwcGxpY2F0aW9uL3ZuZC5hZG9iZS5waG90b3Nob3AgdG8gaW1hZ2UvcG5nIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJkZXJpdmVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJjb252ZXJ0ZWQgZnJvbSBhcHBsaWNhdGlvbi92bmQuYWRvYmUucGhvdG9zaG9wIHRvIGltYWdlL3BuZyIvPiA8cmRmOmxpIHN0RXZ0OmFj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",
"mimeType": "image/png",
"width": 100,
"height": 100
},
{
"type": "html",
"value": "/data/text2"
},
{
"type": "image",
"src": "https://www.virtimo.de/wp-content/uploads/2020/08/virtimo.svg",
"width": 678.2,
"height": 89.7
}
]
}
],
"configuration": {},
"state": {
"data": {
"text1": "<h1>First image</h1><p>The following image is a yellow Virtimo V. The data is encoded in base64.</p>",
"text2": "<h1>Second image</h1><p>The next image is the Virtimo banner. Instead of raw data, a link to the image is provided.</p>"
}
}
}
Eingebettete Vorschau
Keywords: