fix: imports for images with uppercase extensions not working (#8437)

5 files changed, 31 insertions, 3 deletions

diff --git a/.changeset/nice-sheep-bathe.md b/.changeset/nice-sheep-bathe.md
new file mode 100644
index 000000000..712c4d975
--- /dev/null
+++ b/.changeset/nice-sheep-bathe.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix imports of images with uppercased file extensions not working
diff --git a/packages/astro/src/assets/vite-plugin-assets.ts b/packages/astro/src/assets/vite-plugin-assets.ts
index d91d0e492..f114e7ef8 100644
--- a/packages/astro/src/assets/vite-plugin-assets.ts
+++ b/packages/astro/src/assets/vite-plugin-assets.ts
@@ -8,12 +8,14 @@ import {
 	prependForwardSlash,
 	removeQueryString,
 } from '../core/path.js';
-import { VIRTUAL_MODULE_ID, VIRTUAL_SERVICE_ID } from './consts.js';
+import { VALID_INPUT_FORMATS, VIRTUAL_MODULE_ID, VIRTUAL_SERVICE_ID } from './consts.js';
 import { emitESMImage } from './utils/emitAsset.js';
 import { hashTransform, propsToFilename } from './utils/transformToPath.js';
 
 const resolvedVirtualModuleId = '\0' + VIRTUAL_MODULE_ID;
 
+const assetRegex = new RegExp(`\.(${VALID_INPUT_FORMATS.join('|')})$`, 'i');
+
 export default function assets({
 	settings,
 	mode,
@@ -121,7 +123,7 @@ export default function assets({
 				if (id !== removeQueryString(id)) {
 					return;
 				}
-				if (/\.(jpeg|jpg|png|tiff|webp|gif|svg)$/.test(id)) {
+				if (assetRegex.test(id)) {
 					const meta = await emitESMImage(id, this.meta.watchMode, this.emitFile);
 					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 c2f9b6982..f5a1b28f4 100644
--- a/packages/astro/test/core-image.test.js
+++ b/packages/astro/test/core-image.test.js
@@ -3,10 +3,10 @@ import * as cheerio from 'cheerio';
 import { basename } from 'node:path';
 import { Writable } from 'node:stream';
 import { removeDir } from '../dist/core/fs/index.js';
+import { Logger } from '../dist/core/logger/core.js';
 import testAdapter from './test-adapter.js';
 import { testImageService } from './test-image-service.js';
 import { loadFixture } from './test-utils.js';
-import { Logger } from '../dist/core/logger/core.js';
 
 describe('astro:image', () => {
 	/** @type {import('./test-utils').Fixture} */
@@ -159,6 +159,21 @@ describe('astro:image', () => {
 				res = await fixture.fetch(src);
 				expect(res.status).to.equal(200);
 			});
+
+			it('supports uppercased imports', async () => {
+				let res = await fixture.fetch('/uppercase');
+				let html = await res.text();
+				$ = cheerio.load(html);
+
+				let $img = $('img');
+				expect($img).to.have.a.lengthOf(1);
+
+				let src = $img.attr('src');
+				let loading = $img.attr('loading');
+				res = await fixture.fetch(src);
+				expect(res.status).to.equal(200);
+				expect(loading).to.not.be.undefined;
+			});
 		});
 
 		describe('vite-isms', () => {
diff --git a/packages/astro/test/fixtures/core-image/src/assets/walrus.JPG b/packages/astro/test/fixtures/core-image/src/assets/walrus.JPG
new file mode 100644
index 000000000..123958e89
--- /dev/null
+++ b/packages/astro/test/fixtures/core-image/src/assets/walrus.JPG
diff --git a/packages/astro/test/fixtures/core-image/src/pages/uppercase.astro b/packages/astro/test/fixtures/core-image/src/pages/uppercase.astro
new file mode 100644
index 000000000..30a04f2f0
--- /dev/null
+++ b/packages/astro/test/fixtures/core-image/src/pages/uppercase.astro
@@ -0,0 +1,6 @@
+---
+import { Image } from "astro:assets";
+import walrus from "../assets/walrus.JPG";
+---
+
+<Image src={walrus} alt="My favorite animal, the walrus"></Image>