From 65c07ce1b6ab8db50d3866bc36c2e387a9281c6c Mon Sep 17 00:00:00 2001
From: Matthew Phillips <matthew@skypack.dev>
Date: Wed, 8 Mar 2023 15:16:13 -0500
Subject: [PATCH] Fixes ESM imported assets to be root relative (#6465)

* Fixes ESM imported assets to be root relative

* Add changeset
---
 .changeset/smart-crews-swim.md                 |  5 +++++
 .../astro/src/assets/vite-plugin-assets.ts     |  3 ++-
 packages/astro/src/core/util.ts                | 10 ++++++++++
 packages/astro/test/core-image.test.js         | 18 ++++++++++++++++++
 .../core-image/src/pages/regular-img.astro     |  5 +++++
 5 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/smart-crews-swim.md
 create mode 100644 packages/astro/test/fixtures/core-image/src/pages/regular-img.astro

diff --git a/.changeset/smart-crews-swim.md b/.changeset/smart-crews-swim.md
new file mode 100644
index 0000000000..7f7234b626
--- /dev/null
+++ b/.changeset/smart-crews-swim.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes ESM imported assets to be root relative
diff --git a/packages/astro/src/assets/vite-plugin-assets.ts b/packages/astro/src/assets/vite-plugin-assets.ts
index 770e434005..020ac6758a 100644
--- a/packages/astro/src/assets/vite-plugin-assets.ts
+++ b/packages/astro/src/assets/vite-plugin-assets.ts
@@ -9,6 +9,7 @@ import { normalizePath } from 'vite';
 import { AstroPluginOptions, ImageTransform } from '../@types/astro';
 import { error } from '../core/logger/core.js';
 import { joinPaths, prependForwardSlash } from '../core/path.js';
+import { rootRelativePath } from '../core/util.js';
 import { VIRTUAL_MODULE_ID, VIRTUAL_SERVICE_ID } from './consts.js';
 import { isESMImportedImage } from './internal.js';
 import { isLocalService } from './services/service.js';
@@ -223,7 +224,7 @@ export default function assets({
 						url.searchParams.append('origHeight', meta.height.toString());
 						url.searchParams.append('origFormat', meta.format);
 
-						meta.src = url.toString();
+						meta.src = rootRelativePath(settings.config, url);
 					}
 
 					return `export default ${JSON.stringify(meta)}`;
diff --git a/packages/astro/src/core/util.ts b/packages/astro/src/core/util.ts
index a7152e41a2..51abe62c1e 100644
--- a/packages/astro/src/core/util.ts
+++ b/packages/astro/src/core/util.ts
@@ -151,6 +151,16 @@ export function relativeToSrcDir(config: AstroConfig, idOrUrl: URL | string) {
 	return id.slice(slash(fileURLToPath(config.srcDir)).length);
 }
 
+export function rootRelativePath(config: AstroConfig, idOrUrl: URL | string) {
+	let id: string;
+	if (typeof idOrUrl !== 'string') {
+		id = unwrapId(viteID(idOrUrl));
+	} else {
+		id = idOrUrl;
+	}
+	return prependForwardSlash(id.slice(normalizePath(fileURLToPath(config.root)).length));
+}
+
 export function emoji(char: string, fallback: string) {
 	return process.platform !== 'win32' ? char : fallback;
 }
diff --git a/packages/astro/test/core-image.test.js b/packages/astro/test/core-image.test.js
index cbdfae92f3..d6b6642c36 100644
--- a/packages/astro/test/core-image.test.js
+++ b/packages/astro/test/core-image.test.js
@@ -212,6 +212,24 @@ describe('astro:image', () => {
 				expect($img.attr('src').startsWith('/_image')).to.equal(true);
 			});
 		});
+
+		describe('regular img tag', () => {
+			/** @type {ReturnType<import('cheerio')['load']>} */
+			let $;
+			before(async () => {
+				let res = await fixture.fetch('/regular-img');
+				let html = await res.text();
+				$ = cheerio.load(html);
+			});
+
+			it('does not have a file url', async () => {
+				expect($('img').attr('src').startsWith('file://')).to.equal(false);
+			});
+
+			it('includes /src in the path', async () => {
+				expect($('img').attr('src').startsWith('/src')).to.equal(true);
+			});
+		});
 	});
 
 	describe('build ssg', () => {
diff --git a/packages/astro/test/fixtures/core-image/src/pages/regular-img.astro b/packages/astro/test/fixtures/core-image/src/pages/regular-img.astro
new file mode 100644
index 0000000000..eacf14e600
--- /dev/null
+++ b/packages/astro/test/fixtures/core-image/src/pages/regular-img.astro
@@ -0,0 +1,5 @@
+---
+import image from "../assets/penguin2.jpg";
+---
+
+<img src={image.src} />