Fix remote images in SSG mode (#5021)

withastro · Oct 7, 2022 · 062335d · 062335d
1 parent bd756ae
commit 062335d
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 2 deletions.
diff --git a/.changeset/sixty-actors-look.md b/.changeset/sixty-actors-look.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/image': patch
+---
+
+Fix remote images in SSG mode
diff --git a/packages/integrations/image/src/build/ssg.ts b/packages/integrations/image/src/build/ssg.ts
@@ -164,12 +164,13 @@ export async function ssgBuild({
 		for (const [filename, transform] of transforms) {
 			timeStart = performance.now();
 			let outputFile: string;
+			let outputFileURL: URL;
 
 			if (isRemoteImage(src)) {
-				const outputFileURL = new URL(path.join('./assets', path.basename(filename)), outDir);
+				outputFileURL = new URL(path.join('./assets', path.basename(filename)), outDir);
 				outputFile = fileURLToPath(outputFileURL);
 			} else {
-				const outputFileURL = new URL(path.join('./assets', filename), outDir);
+				outputFileURL = new URL(path.join('./assets', filename), outDir);
 				outputFile = fileURLToPath(outputFileURL);
 			}
 
@@ -193,6 +194,8 @@ export async function ssgBuild({
 				}
 			}
 
+			const outputFolder = new URL('./', outputFileURL);
+			await fs.mkdir(outputFolder, { recursive: true });
 			await fs.writeFile(outputFile, data);
 
 			const timeEnd = performance.now();

diff --git a/packages/integrations/image/test/fixtures/get-image-remote/astro.config.mjs b/packages/integrations/image/test/fixtures/get-image-remote/astro.config.mjs
@@ -0,0 +1,8 @@
+import { defineConfig } from 'astro/config';
+import image from '@astrojs/image';
+
+// https://astro.build/config
+export default defineConfig({
+	site: 'http://localhost:3000',
+	integrations: [image({ logLevel: 'silent', serviceEntryPoint: '@astrojs/image/sharp' })]
+});
diff --git a/packages/integrations/image/test/fixtures/get-image-remote/package.json b/packages/integrations/image/test/fixtures/get-image-remote/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "@test/image-get-image-remote",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/image": "workspace:*",
+    "astro": "workspace:*",
+    "sharp": "^0.31.0"
+  }
+}
diff --git a/packages/integrations/image/test/fixtures/get-image-remote/src/pages/index.astro b/packages/integrations/image/test/fixtures/get-image-remote/src/pages/index.astro
@@ -0,0 +1,25 @@
+---
+import { getImage } from "@astrojs/image";
+
+const i = {
+	src: "https://images.unsplash.com/photo-1664309570712-564c233f112b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=200&q=80",
+	format: 'avif',
+	width: 200,
+	height: 300,
+}
+const image = await getImage(i as any);
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="generator" content={Astro.generator} />
+		<title>Astro</title>
+	</head>
+	<body>
+		<h1>Astro</h1>
+		<img {...image} />
+	</body>
+</html>
diff --git a/packages/integrations/image/test/get-image.test.js b/packages/integrations/image/test/get-image.test.js
@@ -0,0 +1,17 @@
+import { expect } from 'chai';
+import { loadFixture } from './test-utils.js';
+
+describe('getImage', function () {
+	/** @type {import('../../../astro/test/test-utils').Fixture} */
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({ root: './fixtures/get-image-remote/' });
+		await fixture.build();
+	});
+
+	it('Remote images works', async () => {
+		const assets = await fixture.readdir('/assets')
+		expect(assets).to.have.a.lengthOf(1);
+	});
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml