diff options
7 files changed, 31 insertions, 5 deletions
diff --git a/.changeset/warm-mangos-dance.md b/.changeset/warm-mangos-dance.md new file mode 100644 index 000000000..f73664e69 --- /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 4e017bbb4..2382797c1 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 5e7f4d0a4..3e32e6f3e 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 455d476d8..87d6e26ec 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 556505704..ac6dccffc 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 f5e4badfe..25feb1716 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 2c750517d..a067dd117 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); @@ -37,6 +37,17 @@ describe('Squoosh service', function () { }, }, { + 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', url: '/_image', |