diff options
| author |  Matthew Phillips <matthew@skypack.dev>
| 2022-10-07 17:08:15 -0400 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-10-07 17:08:15 -0400 |
| commit | 062335dbf7300ad5370e29ebcf7a05d5a4703a1c (patch) | |
| tree | 5a3695c596e3dd5bc095472525e583a0c5a79803 | |
| parent | bd756aea18716c1224cb6afe4e4028c1dd28bdda (diff) | |
| download | astro-062335dbf7300ad5370e29ebcf7a05d5a4703a1c.tar.gz astro-062335dbf7300ad5370e29ebcf7a05d5a4703a1c.tar.zst astro-062335dbf7300ad5370e29ebcf7a05d5a4703a1c.zip | |
Fix remote images in SSG mode (#5021)
7 files changed, 80 insertions, 2 deletions
diff --git a/.changeset/sixty-actors-look.md b/.changeset/sixty-actors-look.md new file mode 100644 index 000000000..fe6c1adb6 --- /dev/null +++ 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 index ba920b4f9..4e017bbb4 100644 --- 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 new file mode 100644 index 000000000..f00c6ebae --- /dev/null +++ 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 new file mode 100644 index 000000000..a5279e312 --- /dev/null +++ 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 new file mode 100644 index 000000000..ff45cd498 --- /dev/null +++ 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 new file mode 100644 index 000000000..6a4ddc816 --- /dev/null +++ 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 index 1c0d473b8..04f1ca855 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2603,6 +2603,16 @@ importers: astro: link:../../../../../astro sharp: 0.31.1 + packages/integrations/image/test/fixtures/get-image-remote: + specifiers: + '@astrojs/image': workspace:* + astro: workspace:* + sharp: ^0.31.0 + dependencies: + '@astrojs/image': link:../../.. + astro: link:../../../../../astro + sharp: 0.31.1 + packages/integrations/image/test/fixtures/no-alt-text-image: specifiers: '@astrojs/image': workspace:* |