fix(assets): Fix image errors when images were used on the client (#9049)

* fix(assets): Fix image errors when images were used on the client

* test: add a test

* chore: changeset

6 files changed, 34 insertions, 3 deletions

diff --git a/.changeset/sour-schools-visit.md b/.changeset/sour-schools-visit.md
new file mode 100644
index 000000000..3470f76e9
--- /dev/null
+++ b/.changeset/sour-schools-visit.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix image errors when images were used on the client
diff --git a/packages/astro/src/assets/vite-plugin-assets.ts b/packages/astro/src/assets/vite-plugin-assets.ts
index 02e3a3bb3..ff6d0034e 100644
--- a/packages/astro/src/assets/vite-plugin-assets.ts
+++ b/packages/astro/src/assets/vite-plugin-assets.ts
@@ -175,7 +175,7 @@ export default function assets({
 			configResolved(viteConfig) {
 				resolvedConfig = viteConfig;
 			},
-			async load(id) {
+			async load(id, options) {
 				// If our import has any query params, we'll let Vite handle it
 				// See https://github.com/withastro/astro/issues/8333
 				if (id !== removeQueryString(id)) {
@@ -191,8 +191,18 @@ export default function assets({
 						});
 					}
 
-					return `
-					export default ${getProxyCode(meta, isServerLikeOutput(settings.config))}`;
+					// We can only reliably determine if an image is used on the server, as we need to track its usage throughout the entire build.
+					// Since you cannot use image optimization on the client anyway, it's safe to assume that if the user imported
+					// an image on the client, it should be present in the final build.
+					if (options?.ssr) {
+						return `export default ${getProxyCode(meta, isServerLikeOutput(settings.config))}`;
+					} else {
+						if (!globalThis.astroAsset.referencedImages)
+							globalThis.astroAsset.referencedImages = new Set();
+
+						globalThis.astroAsset.referencedImages.add(meta.fsPath);
+						return `export default ${JSON.stringify(meta)}`;
+					}
 				}
 			},
 		},
diff --git a/packages/astro/test/core-image.test.js b/packages/astro/test/core-image.test.js
index bd2efc466..0583ed376 100644
--- a/packages/astro/test/core-image.test.js
+++ b/packages/astro/test/core-image.test.js
@@ -935,6 +935,18 @@ describe('astro:image', () => {
 			expect(isReusingCache).to.be.true;
 		});
 
+		it('client images are written to build', async () => {
+			const html = await fixture.readFile('/client/index.html');
+			const $ = cheerio.load(html);
+			let $script = $('script');
+
+			// Find image
+			const regex = /src:"([^"]*)/gm;
+			const imageSrc = regex.exec($script.html())[1];
+			const data = await fixture.readFile(imageSrc, null);
+			expect(data).to.be.an.instanceOf(Buffer);
+		});
+
 		describe('custom service in build', () => {
 			it('uses configured hashes properties', async () => {
 				await fixture.build();
diff --git a/packages/astro/test/fixtures/core-image-ssg/src/assets/light_walrus.avif b/packages/astro/test/fixtures/core-image-ssg/src/assets/light_walrus.avif
new file mode 100644
index 000000000..89e1c3a14
--- /dev/null
+++ b/packages/astro/test/fixtures/core-image-ssg/src/assets/light_walrus.avif
diff --git a/packages/astro/test/fixtures/core-image-ssg/src/client/client-image.ts b/packages/astro/test/fixtures/core-image-ssg/src/client/client-image.ts
new file mode 100644
index 000000000..796f037fa
--- /dev/null
+++ b/packages/astro/test/fixtures/core-image-ssg/src/client/client-image.ts
@@ -0,0 +1,2 @@
+import light_walrus from "../assets/light_walrus.avif";
+console.log(light_walrus);
diff --git a/packages/astro/test/fixtures/core-image-ssg/src/pages/client.astro b/packages/astro/test/fixtures/core-image-ssg/src/pages/client.astro
new file mode 100644
index 000000000..d496bad49
--- /dev/null
+++ b/packages/astro/test/fixtures/core-image-ssg/src/pages/client.astro
@@ -0,0 +1,2 @@
+<script src="../client/client-image.ts"></script>
+<div></div>