Support relative protocol image URL (#5072)

* Support relative protocol image URL

* Fix test

* Actually fix test

Author: bluwy

.changeset/warm-mangos-dance.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/image': patch
+---
+
+Support relative protocol image URL

packages/integrations/image/src/build/ssg.ts

@@ -54,6 +54,10 @@ function webToCachePolicyResponse({ status, headers: _headers }: Response): Cach
 
 async function loadRemoteImage(src: string) {
 	try {
+		if (src.startsWith('//')) {
+			src = `https:${src}`;
+		}
+
 		const req = new Request(src);
 		const res = await fetch(req);
 

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

@@ -140,12 +140,14 @@ export async function getImage(
 		? _loader.serializeTransform(resolved)
 		: globalThis.astroImage.defaultLoader.serializeTransform(resolved);
 
+	const imgSrc =
+		!isLocalImage && resolved.src.startsWith('//') ? `https:${resolved.src}` : resolved.src;
 	let src: string;
 
-	if (/^[\/\\]?@astroimage/.test(resolved.src)) {
-		src = `${resolved.src}?${searchParams.toString()}`;
+	if (/^[\/\\]?@astroimage/.test(imgSrc)) {
+		src = `${imgSrc}?${searchParams.toString()}`;
 	} else {
-		searchParams.set('href', resolved.src);
+		searchParams.set('href', imgSrc);
 		src = `/_image?${searchParams.toString()}`;
 	}
 

packages/integrations/image/src/loaders/squoosh.ts

@@ -89,6 +89,8 @@ class SquooshService extends BaseSSRService {
 			if (autorotate) {
 				operations.push(autorotate);
 			}
+		} else if (transform.src.startsWith('//')) {
+			transform.src = `https:${transform.src}`;
 		}
 
 		if (transform.width || transform.height) {

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

@@ -2,7 +2,7 @@ import { TransformOptions } from '../loaders/index.js';
 import { shorthash } from './shorthash.js';
 
 export function isRemoteImage(src: string) {
-	return /^http(s?):\/\//.test(src);
+	return /^(https?:)?\/\//.test(src);
 }
 
 function removeQueryString(src: string) {

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

@@ -14,5 +14,7 @@ import { Image } from '@astrojs/image/components';
 		<Image id="social-jpg" src={socialJpg} width={506} height={253} alt="social-jpg" />
 		<br />
 		<Image id="google" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width={544} height={184} format="webp" alt="Google" />
+    <br>
+		<Image id="google-alt" src="//www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width={544} height={184} format="webp" alt="Google" />
   </body>
 </html>

packages/integrations/image/test/squoosh-service.test.js

@@ -8,7 +8,7 @@ describe('Squoosh service', function () {
 	let $;
 
 	before(async () => {
-		fixture = await loadFixture({ root: './fixtures/basic-image/' });
+		fixture = await loadFixture({ root: './fixtures/squoosh-service/' });
 		devServer = await fixture.startDevServer();
 		const html = await fixture.fetch('/').then((res) => res.text());
 		$ = cheerio.load(html);
@@ -36,6 +36,17 @@ describe('Squoosh service', function () {
 				href: 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png',
 			},
 		},
+		{
+			title: 'Remote images with relative protocol',
+			id: '#google-alt',
+			url: '/_image',
+			query: {
+				f: 'webp',
+				w: '544',
+				h: '184',
+				href: 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png',
+			},
+		},
 		{
 			title: 'Public images',
 			id: '#hero',