From e5b02bc4557683ec8394e0e2781544e9c68581cc Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Wed, 29 Oct 2025 08:22:41 -0700
Subject: [PATCH] fix: warn rather than crash when non-enhanced image
 dynamically passed to `enhanced:img`

---
 .changeset/poor-heads-fix.md                  |  5 ++
 .../docs/40-best-practices/07-images.md       |  4 +-
 packages/enhanced-img/src/vite-plugin.js      | 84 +++++++++++--------
 packages/enhanced-img/test/Output.svelte      | 21 ++++-
 .../test/apps/basics/src/routes/+page.svelte  |  7 +-
 5 files changed, 83 insertions(+), 38 deletions(-)
 create mode 100644 .changeset/poor-heads-fix.md

diff --git a/.changeset/poor-heads-fix.md b/.changeset/poor-heads-fix.md
new file mode 100644
index 000000000000..aacdc8664ccc
--- /dev/null
+++ b/.changeset/poor-heads-fix.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/enhanced-img': patch
+---
+
+fix: warn rather than crash when non-enhanced image dynamically passed to `enhanced:img`
diff --git a/documentation/docs/40-best-practices/07-images.md b/documentation/docs/40-best-practices/07-images.md
index eb54ec488419..4ba8d2420493 100644
--- a/documentation/docs/40-best-practices/07-images.md
+++ b/documentation/docs/40-best-practices/07-images.md
@@ -84,7 +84,7 @@ You can also use [Vite's `import.meta.glob`](https://vitejs.dev/guide/features.h
 ```svelte
 <script>
 	const imageModules = import.meta.glob(
-		'/path/to/assets/*.{avif,gif,heif,jpeg,jpg,png,tiff,webp,svg}',
+		'/path/to/assets/*.{avif,gif,heif,jpeg,jpg,png,tiff,webp}',
 		{
 			eager: true,
 			query: {
@@ -99,6 +99,8 @@ You can also use [Vite's `import.meta.glob`](https://vitejs.dev/guide/features.h
 {/each}
 ```
 
+> [!NOTE] svg images are currently only supported statically
+
 ### Intrinsic Dimensions
 
 `width` and `height` are optional as they can be inferred from the source image and will be automatically added when the `<enhanced:img>` tag is preprocessed. With these attributes, the browser can reserve the correct amount of space, preventing [layout shift](https://web.dev/articles/cls). If you'd like to use a different `width` and `height` you can style the image with CSS. Because the preprocessor adds a `width` and `height` for you, if you'd like one of the dimensions to be automatically calculated then you will need to specify that:
diff --git a/packages/enhanced-img/src/vite-plugin.js b/packages/enhanced-img/src/vite-plugin.js
index e9eced264413..2c4599057c36 100644
--- a/packages/enhanced-img/src/vite-plugin.js
+++ b/packages/enhanced-img/src/vite-plugin.js
@@ -128,10 +128,13 @@ export function image_plugin(imagetools_plugin) {
 						// this must come after the await so that we don't hand off processing between getting
 						// the imports.size and incrementing the imports.size
 						const name = imports.get(original_url) || '__IMPORTED_ASSET_' + imports.size + '__';
+						if (!metadata.width || !metadata.height) {
+							console.warn(`Could not determine intrinsic dimensions for ${resolved_id}`);
+						}
 						const new_markup = `<img ${serialize_img_attributes(content, node.attributes, {
 							src: `{${name}}`,
-							width: metadata.width || 0,
-							height: metadata.height || 0
+							width: metadata.width,
+							height: metadata.height
 						})} />`;
 						s.update(node.start, node.end, new_markup);
 						imports.set(original_url, name);
@@ -258,8 +261,8 @@ function get_attr_value(node, attr) {
  * @param {import('../types/internal.js').Attribute[]} attributes
  * @param {{
  *   src: string,
- *   width: string | number,
- *   height: string | number
+ *   width?: string | number,
+ *   height?: string | number
  * }} details
  */
 function serialize_img_attributes(content, attributes, details) {
@@ -283,21 +286,23 @@ function serialize_img_attributes(content, attributes, details) {
 			}
 		}
 	}
-	if (!user_width && !user_height) {
-		attribute_strings.push(`width=${details.width}`);
-		attribute_strings.push(`height=${details.height}`);
-	} else if (!user_width && user_height) {
-		attribute_strings.push(
-			`width=${Math.round(
-				(stringToNumber(details.width) * user_height) / stringToNumber(details.height)
-			)}`
-		);
-	} else if (!user_height && user_width) {
-		attribute_strings.push(
-			`height=${Math.round(
-				(stringToNumber(details.height) * user_width) / stringToNumber(details.width)
-			)}`
-		);
+	if (details.width && details.height) {
+		if (!user_width && !user_height) {
+			attribute_strings.push(`width=${details.width}`);
+			attribute_strings.push(`height=${details.height}`);
+		} else if (!user_width && user_height) {
+			attribute_strings.push(
+				`width=${Math.round(
+					(stringToNumber(details.width) * user_height) / stringToNumber(details.height)
+				)}`
+			);
+		} else if (!user_height && user_width) {
+			attribute_strings.push(
+				`height=${Math.round(
+					(stringToNumber(details.height) * user_width) / stringToNumber(details.width)
+				)}`
+			);
+		}
 	}
 
 	return attribute_strings.join(' ');
@@ -358,29 +363,42 @@ function to_value(src) {
  */
 function dynamic_img_to_picture(content, node, src_var_name) {
 	const attributes = node.attributes;
-	const index = attributes.findIndex(
-		(attribute) => 'name' in attribute && attribute.name === 'sizes'
-	);
+	/**
+	 * @param attribute_name {string}
+	 */
+	function index(attribute_name) {
+		return attributes.findIndex(
+			(attribute) => 'name' in attribute && attribute.name === attribute_name
+		);
+	}
+	const size_index = index('sizes');
+	const width_index = index('width');
+	const height_index = index('height');
 	let sizes_string = '';
-	if (index >= 0) {
-		sizes_string = ' ' + content.substring(attributes[index].start, attributes[index].end);
-		attributes.splice(index, 1);
+	if (size_index >= 0) {
+		sizes_string =
+			' ' + content.substring(attributes[size_index].start, attributes[size_index].end);
+		attributes.splice(size_index, 1);
 	}
 
-	const details = {
-		src: `{${src_var_name}.img.src}`,
-		width: `{${src_var_name}.img.w}`,
-		height: `{${src_var_name}.img.h}`
-	};
-
 	return `{#if typeof ${src_var_name} === 'string'}
-	<img ${serialize_img_attributes(content, attributes, details)} />
+	{#if import.meta.DEV && ${!width_index && !height_index}}
+		{${src_var_name}} was not enhanced. Cannot determine dimensions.
+	{:else}
+		<img ${serialize_img_attributes(content, attributes, {
+			src: `{${src_var_name}}`
+		})} />
+	{/if}
 {:else}
 	<picture>
 		{#each Object.entries(${src_var_name}.sources) as [format, srcset]}
 			<source {srcset}${sizes_string} type={'image/' + format} />
 		{/each}
-		<img ${serialize_img_attributes(content, attributes, details)} />
+		<img ${serialize_img_attributes(content, attributes, {
+			src: `{${src_var_name}.img.src}`,
+			width: `{${src_var_name}.img.w}`,
+			height: `{${src_var_name}.img.h}`
+		})} />
 	</picture>
 {/if}`;
 }
diff --git a/packages/enhanced-img/test/Output.svelte b/packages/enhanced-img/test/Output.svelte
index d8c18c1ad88f..431adaf72d27 100644
--- a/packages/enhanced-img/test/Output.svelte
+++ b/packages/enhanced-img/test/Output.svelte
@@ -38,7 +38,12 @@
 <picture><source srcset="/1 1440w, /2 960w" type="image/avif" /><source srcset="/3 1440w, /4 960w" type="image/webp" /><source srcset="5 1440w, /6 960w" type="image/png" /><img src="/7" alt="absolute path test" width=1440 height=1440 /></picture>
 
 {#if typeof src === 'string'}
-	<img src={src.img.src} alt="attribute shorthand test" width={src.img.w} height={src.img.h} />
+	{#if 
+	import.meta.DEV && false}
+		{src} was not enhanced. Cannot determine dimensions.
+	{:else}
+		<img src={src} alt="attribute shorthand test" />
+	{/if}
 {:else}
 	<picture>
 		{#each Object.entries(src.sources) as [format, srcset]}
@@ -50,7 +55,12 @@
 
 {#each images as image}
 	{#if typeof image === 'string'}
-	<img src={image.img.src} alt="opt-in test" width={image.img.w} height={image.img.h} />
+	{#if 
+	import.meta.DEV && false}
+		{image} was not enhanced. Cannot determine dimensions.
+	{:else}
+		<img src={image} alt="opt-in test" />
+	{/if}
 {:else}
 	<picture>
 		{#each Object.entries(image.sources) as [format, srcset]}
@@ -63,7 +73,12 @@
 
 {#each images as _, i}
 	{#if typeof get_image(i) === 'string'}
-	<img src={get_image(i).img.src} alt="opt-in test" width={get_image(i).img.w} height={get_image(i).img.h} />
+	{#if 
+	import.meta.DEV && false}
+		{get_image(i)} was not enhanced. Cannot determine dimensions.
+	{:else}
+		<img src={get_image(i)} alt="opt-in test" />
+	{/if}
 {:else}
 	<picture>
 		{#each Object.entries(get_image(i).sources) as [format, srcset]}
diff --git a/packages/enhanced-img/test/apps/basics/src/routes/+page.svelte b/packages/enhanced-img/test/apps/basics/src/routes/+page.svelte
index 1370a8020d4f..c1b83b304a84 100644
--- a/packages/enhanced-img/test/apps/basics/src/routes/+page.svelte
+++ b/packages/enhanced-img/test/apps/basics/src/routes/+page.svelte
@@ -2,6 +2,11 @@
 	import logo from './logo.png?enhanced';
 </script>
 
-<enhanced:img id="playwright" src="./playwright-logo.svg" alt="Playwright logo" />
+<!-- standard image -->
 <enhanced:img id="birds" src="./birds.jpg" alt="birds" />
+
+<!-- svg over inline size -->
+<enhanced:img id="playwright" src="./playwright-logo.svg" alt="Playwright logo" />
+
+<!-- dynamic image -->
 <enhanced:img id="logo" src={logo} alt="Svelte logo" />