michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix remote images in SSG mode (#5021)

Browse source
This commit is contained in:
Matthew Phillips 2022-10-07 17:08:15 -04:00 committed by GitHub
parent bd756aea18
commit 062335dbf7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 80 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/sixty-actors-look.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/image': patch
---
Fix remote images in SSG mode

7
packages/integrations/image/src/build/ssg.ts
View file

@ -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();

8
packages/integrations/image/test/fixtures/get-image-remote/astro.config.mjs vendored Normal file
View file

@ -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' })]
});

10
packages/integrations/image/test/fixtures/get-image-remote/package.json vendored Normal file
View file

@ -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"
}
}

25
packages/integrations/image/test/fixtures/get-image-remote/src/pages/index.astro vendored Normal file
View file

@ -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>

17
packages/integrations/image/test/get-image.test.js Normal file
View file

@ -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);
});
});

10
pnpm-lock.yaml
View file

@ -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:*