[@astrojs/image] Fixes a regression in remote image filenames (#4649)

* fixes a bug in filename creation for remote images without a file extension

* chore: add changeset

.changeset/swift-wolves-argue.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/image': patch
+---
+
+Fixes a bug related to filenames for remote images in SSG builds

packages/integrations/image/components/Image.astro

@@ -17,7 +17,7 @@ interface RemoteImageProps extends TransformOptions, astroHTML.JSX.ImgHTMLAttrib
 	src: string;
 	/** Defines an alternative text description of the image. Set to an empty string (alt="") if the image is not a key part of the content (it's decoration or a tracking pixel). */
 	alt: string;
-	format: OutputFormat;
+	format?: OutputFormat;
 	width: number;
 	height: number;
 }

packages/integrations/image/src/lib/get-picture.ts

@@ -36,7 +36,7 @@ async function resolveFormats({ src, formats }: GetPictureParams) {
 		unique.add(extname(metadata.src).replace('.', '') as OutputFormat);
 	}
 
-	return [...unique];
+	return Array.from(unique).filter(Boolean);
 }
 
 export async function getPicture(params: GetPictureParams): Promise<GetPictureResult> {

packages/integrations/image/src/utils/paths.ts

@@ -14,7 +14,7 @@ function extname(src: string, format?: OutputFormat) {
 	const index = src.lastIndexOf('.');
 
 	if (index <= 0) {
-		return undefined;
+		return '';
 	}
 
 	return src.substring(index);
@@ -38,11 +38,12 @@ export function propsToFilename(transform: TransformOptions) {
 	// strip off the querystring first, then remove the file extension
 	let filename = removeQueryString(transform.src);
 	filename = basename(filename);
+	const ext = extname(filename);
 	filename = removeExtname(filename);
 
-	const ext = transform.format || extname(transform.src)?.substring(1);
+	const outputExt = transform.format ? `.${transform.format}` : ext
 
-	return `/${filename}_${shorthash(JSON.stringify(transform))}.${ext}`;
+	return `/${filename}_${shorthash(JSON.stringify(transform))}${outputExt}`;
 }
 
 export function appendForwardSlash(path: string) {

packages/integrations/image/test/fixtures/basic-image/src/pages/index.astro

@@ -20,5 +20,7 @@ import { Image } from '@astrojs/image/components';
 		<Image id="inline" src={import('../assets/social.jpg')} width={506} alt="inline" />
 		<br />
 		<Image id="query" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png?token=abc" width={544} height={184} format="webp" alt="query" />
+		<br />
+		<Image id="ipsum" src="https://picsum.photos/200/300" width={200} height={300} alt="ipsum" format="jpeg" />
   </body>
 </html>

packages/integrations/image/test/fixtures/basic-picture/src/pages/index.astro

@@ -12,8 +12,10 @@ import { Picture } from '@astrojs/image/components';
 		<br />
 		<Picture id="social-jpg" src={socialJpg} sizes="(min-width: 640px) 50vw, 100vw" widths={[253, 506]} alt="Social image" />
 		<br />
-		<Picture id="google" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" sizes="(min-width: 640px) 50vw, 100vw" widths={[272, 544]} aspectRatio={544/184} alt="Google logo" />
+		<Picture id="google" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" sizes="(min-width: 640px) 50vw, 100vw" widths={[272, 544]} aspectRatio={544/184} alt="Google logo" formats={["avif", "webp", "png"]} />
 		<br />
 		<Picture id='inline' src={import('../assets/social.jpg')} sizes="(min-width: 640px) 50vw, 100vw" widths={[253, 506]} alt="Inline social image" />
+		<br />
+		<Picture id="ipsum" src="https://picsum.photos/200/300" sizes="100vw" widths={[100, 200]} aspectRatio={2/3} formats={["avif", "webp", "jpg"]} alt="ipsum" />
   </body>
 </html>

packages/integrations/image/test/image-ssg.test.js

@@ -50,6 +50,16 @@ describe('SSG images - dev', function () {
 				href: 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png',
 			},
 		},
+		{
+			title: 'Remote without file extension',
+			id: '#ipsum',
+			url: '/_image',
+			query: {
+				w: '200',
+				h: '300',
+				href: 'https://picsum.photos/200/300'
+			}
+		},
 		{
 			title: 'Public images',
 			id: '#hero',
@@ -120,6 +130,17 @@ describe('SSG images with subpath - dev', function () {
 				href: 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png',
 			},
 		},
+
+		{
+			title: 'Remote without file extension',
+			id: '#ipsum',
+			url: '/_image',
+			query: {
+				w: '200',
+				h: '300',
+				href: 'https://picsum.photos/200/300'
+			}
+		},
 		{
 			title: 'Public images',
 			id: '#hero',
@@ -189,6 +210,12 @@ describe('SSG images - build', function () {
 			regex: /^\/googlelogo_color_272x92dp_\w{4,10}.webp/,
 			size: { width: 544, height: 184, type: 'webp' },
 		},
+		{
+			title: 'Remote without file extension',
+			id: '#ipsum',
+			regex: /^\/300_\w{4,10}/,
+			size: { width: 200, height: 300, type: 'jpg' },
+		},
 		{
 			title: 'Public images',
 			id: '#hero',
@@ -253,6 +280,12 @@ describe('SSG images with subpath - build', function () {
 			regex: /^\/docs\/googlelogo_color_272x92dp_\w{4,10}.webp/,
 			size: { width: 544, height: 184, type: 'webp' },
 		},
+		{
+			title: 'Remote without file extension',
+			id: '#ipsum',
+			regex: /^\/docs\/300_\w{4,10}/,
+			size: { width: 200, height: 300, type: 'jpg' },
+		},
 		{
 			title: 'Public images',
 			id: '#hero',

packages/integrations/image/test/image-ssr-build.test.js

@@ -45,6 +45,16 @@ describe('SSR images - build', async function () {
 				href: 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png',
 			},
 		},
+		{
+			title: 'Remote without file extension',
+			id: '#ipsum',
+			url: '/_image',
+			query: {
+				w: '200',
+				h: '300',
+				href: 'https://picsum.photos/200/300',
+			},
+		},
 		{
 			title: 'Remote images with search',
 			id: '#query',
@@ -139,6 +149,16 @@ describe('SSR images with subpath - build', function () {
 				href: 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png',
 			},
 		},
+		{
+			title: 'Remote without file extension',
+			id: '#ipsum',
+			url: '/_image',
+			query: {
+				w: '200',
+				h: '300',
+				href: 'https://picsum.photos/200/300',
+			},
+		},
 		{
 			title: 'Remote images with search',
 			id: '#query',

packages/integrations/image/test/image-ssr-dev.test.js

@@ -58,6 +58,17 @@ describe('SSR images - dev', function () {
 			},
 			contentType: 'image/webp',
 		},
+		{
+			title: 'Remote wihtout file extension',
+			id: '#ipsum',
+			url: '/_image',
+			query: {
+				w: '200',
+				h: '300',
+				href: 'https://picsum.photos/200/300',
+			},
+			contentType: 'image/jpeg',
+		},
 		{
 			title: 'Public images',
 			id: '#hero',
@@ -149,6 +160,17 @@ describe('SSR images with subpath - dev', function () {
 			},
 			contentType: 'image/webp',
 		},
+		{
+			title: 'Remote wihtout file extension',
+			id: '#ipsum',
+			url: '/_image',
+			query: {
+				w: '200',
+				h: '300',
+				href: 'https://picsum.photos/200/300',
+			},
+			contentType: 'image/jpeg',
+		},
 		{
 			title: 'Public images',
 			id: '#hero',

packages/integrations/image/test/picture-ssg.test.js

@@ -200,6 +200,13 @@ describe('SSG pictures - build', function () {
 			size: { width: 544, height: 184, type: 'png' },
 			alt: 'Google logo',
 		},
+		{
+			title: 'Remote without file extension',
+			id: '#ipsum',
+			regex: /^\/300_\w{4,10}/,
+			size: { width: 200, height: 300, type: 'jpg' },
+			alt: 'ipsum',
+		},
 		{
 			title: 'Public images',
 			id: '#hero',
@@ -288,6 +295,13 @@ describe('SSG pictures with subpath - build', function () {
 			size: { width: 544, height: 184, type: 'png' },
 			alt: 'Google logo',
 		},
+		{
+			title: 'Remote without file extension',
+			id: '#ipsum',
+			regex: /^\/docs\/300_\w{4,10}/,
+			size: { width: 200, height: 300, type: 'jpg' },
+			alt: 'ipsum',
+		},
 		{
 			title: 'Public images',
 			id: '#hero',

packages/integrations/image/test/picture-ssr-build.test.js

@@ -42,6 +42,17 @@ describe('SSR pictures - build', function () {
 			},
 			alt: 'Google logo',
 		},
+		{
+			title: 'Remote without file extension',
+			id: '#ipsum',
+			url: '/_image',
+			query: {
+				w: '200',
+				h: '300',
+				href: 'https://picsum.photos/200/300',
+			},
+			alt: 'ipsum',
+		},
 		{
 			title: 'Public images',
 			id: '#hero',
@@ -122,6 +133,17 @@ describe('SSR pictures with subpath - build', function () {
 			},
 			alt: 'Google logo',
 		},
+		{
+			title: 'Remote without file extension',
+			id: '#ipsum',
+			url: '/_image',
+			query: {
+				w: '200',
+				h: '300',
+				href: 'https://picsum.photos/200/300',
+			},
+			alt: 'ipsum',
+		},
 		{
 			title: 'Public images',
 			id: '#hero',

packages/integrations/image/test/picture-ssr-dev.test.js

@@ -54,6 +54,19 @@ describe('SSR pictures - dev', function () {
 			contentType: 'image/png',
 			alt: 'Google logo',
 		},
+		{
+			title: 'Remote without file extension',
+			id: '#ipsum',
+			url: '/_image',
+			query: {
+				f: 'jpg',
+				w: '200',
+				h: '300',
+				href: 'https://picsum.photos/200/300',
+			},
+			contentType: 'image/jpeg',
+			alt: 'ipsum',
+		},
 		{
 			title: 'Public images',
 			id: '#hero',
@@ -148,6 +161,19 @@ describe('SSR pictures with subpath - dev', function () {
 			contentType: 'image/png',
 			alt: 'Google logo',
 		},
+		{
+			title: 'Remote without file extension',
+			id: '#ipsum',
+			url: '/_image',
+			query: {
+				f: 'jpg',
+				w: '200',
+				h: '300',
+				href: 'https://picsum.photos/200/300',
+			},
+			contentType: 'image/jpeg',
+			alt: 'ipsum',
+		},,
 		{
 			title: 'Public images',
 			id: '#hero',