Bilder

src/components/AusweisPruefenBox.svelte

@@ -748,7 +748,7 @@
 				{#each bilder as image}
 					<div>
 						<h2 class="text-lg mb-4 font-bold">{image.kategorie}</h2>
-						<img src="/bilder/{image.uid}.webp">
+						<img src="/bilder/{image.uid}.jpg">
 					</div>
 				{/each}
 			{/if}

src/components/Dashboard/DashboardObjekt.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { ObjektKomplettClient } from "#components/Ausweis/types.js";
-	import { Enums } from "#lib/client/prisma";
+	import { Enums } from "#lib/client/prisma.js";
 	import moment from "moment";
 	import { File, OpenInNewWindow } from "radix-svelte-icons";
 
@@ -12,7 +12,7 @@
 		{@const bild = objekt.aufnahmen[0].bilder.find(bild => bild.kategorie === Enums.BilderKategorie.Gebaeude)}
 
 		{#if bild}
-			<img src="/bilder/{bild.uid}.webp" class="w-full max-h-72 object-cover rounded-t-lg" alt="Gebäude">
+			<img src="/bilder/{bild.uid}.jpg" class="w-full max-h-72 object-cover rounded-t-lg" alt="Gebäude">
 		{/if}
 	{/if}
 

src/components/ImageGrid.svelte

@@ -15,7 +15,7 @@
 	async function rotateImage(image: UploadedGebaeudeBild): Promise<UploadedGebaeudeBild> {
 		return new Promise((resolve, reject) => {
 			let img = new Image();
-			img.src = image.data ? image.data : `/bilder/${image.uid}.webp`;
+			img.src = image.data ? image.data : `/bilder/${image.uid}.jpg`;
 			img.onload = () => {
 				let canvas = document.createElement("canvas");
 				let ctx = canvas.getContext("2d");
@@ -25,7 +25,7 @@
 				ctx?.rotate((-90 * Math.PI) / 180);
 				ctx?.drawImage(img, -img.width / 2, -img.height / 2);
 				const clone = Object.assign({}, image)
-				clone.data = canvas.toDataURL("image/webp");
+				clone.data = canvas.toDataURL("image/jpeg");
 				clone.update = true;
 				resolve(clone)
 			};
@@ -42,7 +42,7 @@
 			{#if image.kategorie == kategorie}
 				<div class="relative group">
 					<img
-						src="/bilder/{image.uid}.webp"
+						src="/bilder/{image.uid}.jpg"
 						alt={kategorie}
 						class="h-full max-h-96 w-full rounded-lg border-2 group-hover:contrast-50 object-cover transition-all"
 					/>