Fix imports using ?raw and ?url not working when `experimental.assets…

…` is enabled (#7108)

.changeset/thirty-squids-relax.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix imports using ?raw and ?url not working when `experimental.assets` is enabled

packages/astro/src/assets/vite-plugin-assets.ts

@@ -24,6 +24,9 @@ import { hashTransform, propsToFilename } from './utils/transformToPath.js';
 
 const resolvedVirtualModuleId = '\0' + VIRTUAL_MODULE_ID;
 
+const rawRE = /(?:\?|&)raw(?:&|$)/;
+const urlRE = /(\?|&)url(?:&|$)/;
+
 export default function assets({
 	settings,
 	logging,
@@ -233,6 +236,11 @@ export default function assets({
 				resolvedConfig = viteConfig;
 			},
 			async load(id) {
+				// If our import has the `?raw` or `?url` Vite query params, we'll let Vite handle it
+				if (rawRE.test(id) || urlRE.test(id)) {
+					return;
+				}
+
 				const cleanedUrl = removeQueryString(id);
 				if (/\.(jpeg|jpg|png|tiff|webp|gif|svg)$/.test(cleanedUrl)) {
 					const meta = await emitESMImage(id, this.meta.watchMode, this.emitFile, settings);

packages/astro/test/core-image.test.js

@@ -116,6 +116,33 @@ describe('astro:image', () => {
 			});
 		});
 
+		describe('vite-isms', () => {
+			/**
+			 * @type {cheerio.CheerioAPI}
+			 */
+			let $;
+			before(async () => {
+				let res = await fixture.fetch('/vite');
+				let html = await res.text();
+				$ = cheerio.load(html);
+			});
+
+			it('support ?url imports', () => {
+				let $url = $('#url');
+				expect($url.text()).to.equal('string');
+			});
+
+			it('support ?raw imports', () => {
+				let $raw = $('#raw');
+				expect($raw.text()).to.equal('string');
+			});
+
+			it('support glob import as raw', () => {
+				let $raw = $('#glob-import');
+				expect($raw.text()).to.equal('string');
+			});
+		});
+
 		describe('remote', () => {
 			describe('working', () => {
 				let $;

packages/astro/test/fixtures/core-image/src/pages/vite.astro

@@ -0,0 +1,10 @@
+---
+import imageRaw from "../assets/penguin1.jpg?raw";
+import imageUrl from "../assets/penguin1.jpg?url";
+
+const globImport = import.meta.glob('../assets/penguin1.jpg', { as: 'raw', eager: true })
+---
+
+<div id="url">{typeof imageUrl}</div>
+<div id="raw">{typeof imageRaw}</div>
+<div id="glob-import">{typeof globImport['../assets/penguin1.jpg']}</div>