From 3918787cb9676a8c6b9be371ae90edeb676f4e8f Mon Sep 17 00:00:00 2001
From: Bjorn Lu <bjornlu.dev@gmail.com>
Date: Thu, 13 Oct 2022 23:59:38 +0800
Subject: [PATCH] Support relative protocol image URL (#5072)

* Support relative protocol image URL

* Fix test

* Actually fix test
---
 .changeset/warm-mangos-dance.md                     |  5 +++++
 packages/integrations/image/src/build/ssg.ts        |  4 ++++
 packages/integrations/image/src/lib/get-image.ts    |  8 +++++---
 packages/integrations/image/src/loaders/squoosh.ts  |  2 ++
 packages/integrations/image/src/utils/paths.ts      |  2 +-
 .../fixtures/squoosh-service/src/pages/index.astro  |  2 ++
 .../integrations/image/test/squoosh-service.test.js | 13 ++++++++++++-
 7 files changed, 31 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/warm-mangos-dance.md

diff --git a/.changeset/warm-mangos-dance.md b/.changeset/warm-mangos-dance.md
new file mode 100644
index 000000000000..f73664e699d0
--- /dev/null
+++ b/.changeset/warm-mangos-dance.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/image': patch
+---
+
+Support relative protocol image URL
diff --git a/packages/integrations/image/src/build/ssg.ts b/packages/integrations/image/src/build/ssg.ts
index 4e017bbb4faf..2382797c1416 100644
--- a/packages/integrations/image/src/build/ssg.ts
+++ b/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);
 
diff --git a/packages/integrations/image/src/lib/get-image.ts b/packages/integrations/image/src/lib/get-image.ts
index 5e7f4d0a4eab..3e32e6f3ed17 100644
--- a/packages/integrations/image/src/lib/get-image.ts
+++ b/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()}`;
 	}
 
diff --git a/packages/integrations/image/src/loaders/squoosh.ts b/packages/integrations/image/src/loaders/squoosh.ts
index 455d476d83e5..87d6e26ec1ad 100644
--- a/packages/integrations/image/src/loaders/squoosh.ts
+++ b/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) {
diff --git a/packages/integrations/image/src/utils/paths.ts b/packages/integrations/image/src/utils/paths.ts
index 556505704f99..ac6dccffc1f5 100644
--- a/packages/integrations/image/src/utils/paths.ts
+++ b/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) {
diff --git a/packages/integrations/image/test/fixtures/squoosh-service/src/pages/index.astro b/packages/integrations/image/test/fixtures/squoosh-service/src/pages/index.astro
index f5e4badfe719..25feb1716156 100644
--- a/packages/integrations/image/test/fixtures/squoosh-service/src/pages/index.astro
+++ b/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>
diff --git a/packages/integrations/image/test/squoosh-service.test.js b/packages/integrations/image/test/squoosh-service.test.js
index 2c750517d53f..a067dd117ce7 100644
--- a/packages/integrations/image/test/squoosh-service.test.js
+++ b/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',