Image width/height for gallery component, don't save ImageCache props

src/lib/components/gradio/image/StaticImage.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import type { SelectData } from "@gradio/utils";
+	import { BlockLabel, Empty, IconButton } from "@gradio/atoms";
+	import { Download } from "@gradio/icons";
+	import { get_coordinates_of_clicked_image } from "./utils";
+
+	import { Image } from "@gradio/icons";
+
+	export let value: null | string;
+	export let label: string | undefined = undefined;
+	export let show_label: boolean;
+	export let selectable: boolean = false;
+ export let imageWidth: number = 1;
+ export let imageHeight: number = 1;
+ let imageElem: HTMLImageElement | null = null;
+
+	const dispatch = createEventDispatcher<{
+		change: string;
+		select: SelectData;
+	}>();
+
+	$: value && dispatch("change", value);
+
+ $: if (value == null || !imageElem) {
+     imageWidth = 1;
+     imageHeight = 1;
+ }
+
+	const handle_click = (evt: MouseEvent) => {
+		let coordinates = get_coordinates_of_clicked_image(evt);
+		if (coordinates) {
+			dispatch("select", { index: coordinates, value: null });
+		}
+	};
+</script>
+
+<BlockLabel {show_label} Icon={Image} label={label || "Image"} />
+{#if value === null}
+	<Empty size="large" unpadded_box={true}><Image /></Empty>
+{:else}
+	<div class="download">
+		<a
+			href={value}
+			target={window.__is_colab__ ? "_blank" : null}
+			download={"image"}
+		>
+			<IconButton Icon={Download} label="Download" />
+		</a>
+	</div>
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<img src={value} alt="" class:selectable on:click={handle_click} bind:naturalWidth={imageWidth} bind:naturalHeight={imageHeight} />
+{/if}
+
+<style>
+	img {
+		width: var(--size-full);
+		height: var(--size-full);
+		object-fit: contain;
+	}
+
+	.selectable {
+		cursor: crosshair;
+	}
+
+	.download {
+		position: absolute;
+		top: 6px;
+		right: 6px;
+	}
+</style>