fix: add image base64 source kinds

frontend/src/lib/components/apps/components/display/AppImage.svelte

@@ -58,7 +58,13 @@
 	<Loader loading={resolvedConfig.source == undefined}>
 		<img
 			on:pointerdown|preventDefault
-			src={resolvedConfig.source}
+			src={resolvedConfig.sourceKind == 'png encoded as base64'
+				? 'data:image/png;base64,' + resolvedConfig.source
+				: resolvedConfig.sourceKind == 'jpeg encoded as base64'
+				? 'data:image/jpeg;base64,' + resolvedConfig.source
+				: resolvedConfig.sourceKind == 'svg encoded as base64'
+				? 'data:image/svg+xml;base64,' + resolvedConfig.source
+				: resolvedConfig.source}
 			alt={resolvedConfig.altText}
 			style={css?.image?.style ?? ''}
 			class={twMerge(

frontend/src/lib/components/apps/editor/component/components.ts

@@ -313,7 +313,13 @@ export const selectOptions = {
 		'scatter'
 	] as ChartType[],
 	animationTimingFunctionOptions: ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'],
-	prose: ['sm', 'Default', 'lg', 'xl', '2xl']
+	prose: ['sm', 'Default', 'lg', 'xl', '2xl'],
+	imageSourceKind: [
+		'url',
+		'png encoded as base64',
+		'jpeg encoded as base64',
+		'svg encoded as base64'
+	]
 }
 const labels = {
 	none: 'Do nothing',
@@ -2305,6 +2311,12 @@ This is a paragraph.
 						convertTo: 'base64'
 					}
 				},
+				sourceKind: {
+					fieldType: 'select',
+					type: 'static',
+					selectOptions: selectOptions.imageSourceKind,
+					value: 'url' as (typeof selectOptions.imageSourceKind)[number]
+				},
 				imageFit: {
 					fieldType: 'select',
 					type: 'static',