fix: handle trailing slash on the image endpoint (#12022)

* feat: add trailing slash to import.meta.env for URLs building

* feat: add jsdoc

* feat: add trailing slash to config option directly

* chore: changeset

.changeset/hot-camels-move.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Properly handle including trailing slash on the image endpoint route based on the trailingSlash config

packages/astro/src/assets/services/service.ts

@@ -343,7 +343,10 @@ export const baseService: Omit<LocalImageService, 'transform'> = {
 			options[key] && searchParams.append(param, options[key].toString());
 		});
 
-		const imageEndpoint = joinPaths(import.meta.env.BASE_URL, imageConfig.endpoint.route);
+		const imageEndpoint = joinPaths(
+			import.meta.env.BASE_URL,
+			imageConfig.endpoint.route
+		);
 		return `${imageEndpoint}?${searchParams}`;
 	},
 	parseURL(url) {

packages/astro/src/core/config/schema.ts

@@ -657,13 +657,16 @@ export function createRelativeSchema(cmd: string, fileProtocolRoot: string) {
 				config.build.server = resolveDirAsUrl(originalBuildServer, outDirPath);
 			}
 
-			// Handle `base` trailing slash based on `trailingSlash` config
+			// Handle `base` and `image.endpoint.route` trailing slash based on `trailingSlash` config
 			if (config.trailingSlash === 'never') {
 				config.base = prependForwardSlash(removeTrailingForwardSlash(config.base));
+				config.image.endpoint.route = prependForwardSlash(removeTrailingForwardSlash(config.image.endpoint.route));
 			} else if (config.trailingSlash === 'always') {
 				config.base = prependForwardSlash(appendForwardSlash(config.base));
+				config.image.endpoint.route = prependForwardSlash(appendForwardSlash(config.image.endpoint.route));
 			} else {
 				config.base = prependForwardSlash(config.base);
+				config.image.endpoint.route = prependForwardSlash(config.image.endpoint.route);
 			}
 
 			return config;

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

@@ -1,7 +1,7 @@
 import assert from 'node:assert/strict';
 import { basename } from 'node:path';
 import { Writable } from 'node:stream';
-import { after, before, describe, it } from 'node:test';
+import { after, afterEach, before, describe, it } from 'node:test';
 import { removeDir } from '@astrojs/internal-helpers/fs';
 import * as cheerio from 'cheerio';
 import parseSrcset from 'parse-srcset';
@@ -1251,4 +1251,51 @@ describe('astro:image', () => {
 			assert.equal(imgData instanceof Buffer, true);
 		});
 	});
+
+	describe('trailing slash on the endpoint', () => {
+		/** @type {import('./test-utils').DevServer} */
+		let devServer;
+
+		it('includes a trailing slash if trailing slash is set to always', async () => {
+			fixture = await loadFixture({
+				root: './fixtures/core-image/',
+				image: {
+					service: testImageService(),
+				},
+				trailingSlash: 'always',
+			});
+			devServer = await fixture.startDevServer();
+
+			let res = await fixture.fetch('/');
+			let html = await res.text();
+
+			const $ = cheerio.load(html);
+			const src = $('#local img').attr('src');
+
+			assert.equal(src.startsWith('/_image/?'), true);
+		})
+
+		it('does not includes a trailing slash if trailing slash is set to never', async () => {
+			fixture = await loadFixture({
+				root: './fixtures/core-image/',
+				image: {
+					service: testImageService(),
+				},
+				trailingSlash: 'never',
+			});
+			devServer = await fixture.startDevServer();
+
+			let res = await fixture.fetch('/');
+			let html = await res.text();
+
+			const $ = cheerio.load(html);
+			const src = $('#local img').attr('src');
+
+			assert.equal(src.startsWith('/_image?'), true);
+		})
+
+		afterEach(async () => {
+			await devServer.stop();
+		});
+	})
 });