summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--.changeset/proud-gifts-explain.md5
-rw-r--r--packages/integrations/image/src/build/ssg.ts4
-rw-r--r--packages/integrations/image/src/index.ts2
-rw-r--r--packages/integrations/image/src/loaders/sharp.ts2
-rw-r--r--packages/integrations/image/test/image-ssg.test.js28
-rw-r--r--packages/integrations/image/test/picture-ssg.test.js20
-rw-r--r--packages/integrations/image/test/rotation.test.js4
-rw-r--r--packages/integrations/image/test/with-mdx.test.js10
8 files changed, 40 insertions, 35 deletions
diff --git a/.changeset/proud-gifts-explain.md b/.changeset/proud-gifts-explain.md
new file mode 100644
index 000000000..0c75aab9a
--- /dev/null
+++ b/.changeset/proud-gifts-explain.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/image': patch
+---
+
+Updates the integration to build all optimized images to `dist/assets` during SSG builds
diff --git a/packages/integrations/image/src/build/ssg.ts b/packages/integrations/image/src/build/ssg.ts
index 4cf418ad0..9219b9afd 100644
--- a/packages/integrations/image/src/build/ssg.ts
+++ b/packages/integrations/image/src/build/ssg.ts
@@ -83,10 +83,10 @@ export async function ssgBuild({ loader, staticImages, config, outDir, logLevel
let outputFile: string;
if (isRemoteImage(src)) {
- const outputFileURL = new URL(path.join('./', path.basename(filename)), outDir);
+ const outputFileURL = new URL(path.join('./assets', path.basename(filename)), outDir);
outputFile = fileURLToPath(outputFileURL);
} else {
- const outputFileURL = new URL(path.join('./', filename), outDir);
+ const outputFileURL = new URL(path.join('./assets', filename), outDir);
outputFile = fileURLToPath(outputFileURL);
}
diff --git a/packages/integrations/image/src/index.ts b/packages/integrations/image/src/index.ts
index 01948c025..38c654354 100644
--- a/packages/integrations/image/src/index.ts
+++ b/packages/integrations/image/src/index.ts
@@ -85,7 +85,7 @@ export default function integration(options: IntegrationOptions = {}): AstroInte
// Doing this here makes sure that base is ignored when building
// staticImages to /dist, but the rendered HTML will include the
// base prefix for `src`.
- return prependForwardSlash(joinPaths(_config.base, filename));
+ return prependForwardSlash(joinPaths(_config.base, 'assets', filename));
}
// Helpers for building static images should only be available for SSG
diff --git a/packages/integrations/image/src/loaders/sharp.ts b/packages/integrations/image/src/loaders/sharp.ts
index dbb082dba..09a653375 100644
--- a/packages/integrations/image/src/loaders/sharp.ts
+++ b/packages/integrations/image/src/loaders/sharp.ts
@@ -116,6 +116,6 @@ class SharpService implements SSRImageService {
}
}
-const service = new SharpService();
+const service: SSRImageService = new SharpService();
export default service;
diff --git a/packages/integrations/image/test/image-ssg.test.js b/packages/integrations/image/test/image-ssg.test.js
index 0daf066d3..aa6cf586f 100644
--- a/packages/integrations/image/test/image-ssg.test.js
+++ b/packages/integrations/image/test/image-ssg.test.js
@@ -213,43 +213,43 @@ describe('SSG images - build', function () {
{
title: 'Local images',
id: '#social-jpg',
- regex: /^\/social.\w{8}_\w{4,10}.jpg/,
+ regex: /^\/assets\/social.\w{8}_\w{4,10}.jpg/,
size: { width: 506, height: 253, type: 'jpg' },
},
{
title: 'Filename with spaces',
id: '#spaces',
- regex: /^\/introducing astro.\w{8}_\w{4,10}.webp/,
+ regex: /^\/assets\/introducing astro.\w{8}_\w{4,10}.webp/,
size: { width: 768, height: 414, type: 'webp' },
},
{
title: 'Inline imports',
id: '#inline',
- regex: /^\/social.\w{8}_\w{4,10}.jpg/,
+ regex: /^\/assets\/social.\w{8}_\w{4,10}.jpg/,
size: { width: 506, height: 253, type: 'jpg' },
},
{
title: 'Remote images',
id: '#google',
- regex: /^\/googlelogo_color_272x92dp_\w{4,10}.webp/,
+ regex: /^\/assets\/googlelogo_color_272x92dp_\w{4,10}.webp/,
size: { width: 544, height: 184, type: 'webp' },
},
{
title: 'Remote without file extension',
id: '#ipsum',
- regex: /^\/300_\w{4,10}/,
+ regex: /^\/assets\/300_\w{4,10}/,
size: { width: 200, height: 300, type: 'jpg' },
},
{
title: 'Public images',
id: '#hero',
- regex: /^\/hero_\w{4,10}.webp/,
+ regex: /^\/assets\/hero_\w{4,10}.webp/,
size: { width: 768, height: 414, type: 'webp' },
},
{
title: 'Remote images',
id: '#bg-color',
- regex: /^\/googlelogo_color_272x92dp_\w{4,10}.jpeg/,
+ regex: /^\/assets\/googlelogo_color_272x92dp_\w{4,10}.jpeg/,
size: { width: 544, height: 184, type: 'jpg' },
},
].forEach(({ title, id, regex, size }) => {
@@ -289,43 +289,43 @@ describe('SSG images with subpath - build', function () {
{
title: 'Local images',
id: '#social-jpg',
- regex: /^\/docs\/social.\w{8}_\w{4,10}.jpg/,
+ regex: /^\/docs\/assets\/social.\w{8}_\w{4,10}.jpg/,
size: { width: 506, height: 253, type: 'jpg' },
},
{
title: 'Filename with spaces',
id: '#spaces',
- regex: /^\/docs\/introducing astro.\w{8}_\w{4,10}.webp/,
+ regex: /^\/docs\/assets\/introducing astro.\w{8}_\w{4,10}.webp/,
size: { width: 768, height: 414, type: 'webp' },
},
{
title: 'Inline imports',
id: '#inline',
- regex: /^\/docs\/social.\w{8}_\w{4,10}.jpg/,
+ regex: /^\/docs\/assets\/social.\w{8}_\w{4,10}.jpg/,
size: { width: 506, height: 253, type: 'jpg' },
},
{
title: 'Remote images',
id: '#google',
- regex: /^\/docs\/googlelogo_color_272x92dp_\w{4,10}.webp/,
+ regex: /^\/docs\/assets\/googlelogo_color_272x92dp_\w{4,10}.webp/,
size: { width: 544, height: 184, type: 'webp' },
},
{
title: 'Remote without file extension',
id: '#ipsum',
- regex: /^\/docs\/300_\w{4,10}/,
+ regex: /^\/docs\/assets\/300_\w{4,10}/,
size: { width: 200, height: 300, type: 'jpg' },
},
{
title: 'Public images',
id: '#hero',
- regex: /^\/docs\/hero_\w{4,10}.webp/,
+ regex: /^\/docs\/assets\/hero_\w{4,10}.webp/,
size: { width: 768, height: 414, type: 'webp' },
},
{
title: 'Remote images',
id: '#bg-color',
- regex: /^\/docs\/googlelogo_color_272x92dp_\w{4,10}.jpeg/,
+ regex: /^\/docs\/assets\/googlelogo_color_272x92dp_\w{4,10}.jpeg/,
size: { width: 544, height: 184, type: 'jpg' },
},
].forEach(({ title, id, regex, size }) => {
diff --git a/packages/integrations/image/test/picture-ssg.test.js b/packages/integrations/image/test/picture-ssg.test.js
index 96876b57a..6345f8dee 100644
--- a/packages/integrations/image/test/picture-ssg.test.js
+++ b/packages/integrations/image/test/picture-ssg.test.js
@@ -195,35 +195,35 @@ describe('SSG pictures - build', function () {
{
title: 'Local images',
id: '#social-jpg',
- regex: /^\/social.\w{8}_\w{4,10}.jpg/,
+ regex: /^\/assets\/social.\w{8}_\w{4,10}.jpg/,
size: { width: 506, height: 253, type: 'jpg' },
alt: 'Social image',
},
{
title: 'Inline images',
id: '#inline',
- regex: /^\/social.\w{8}_\w{4,10}.jpg/,
+ regex: /^\/assets\/social.\w{8}_\w{4,10}.jpg/,
size: { width: 506, height: 253, type: 'jpg' },
alt: 'Inline social image',
},
{
title: 'Remote images',
id: '#google',
- regex: /^\/googlelogo_color_272x92dp_\w{4,10}.png/,
+ regex: /^\/assets\/googlelogo_color_272x92dp_\w{4,10}.png/,
size: { width: 544, height: 184, type: 'png' },
alt: 'Google logo',
},
{
title: 'Remote without file extension',
id: '#ipsum',
- regex: /^\/300_\w{4,10}/,
+ regex: /^\/assets\/300_\w{4,10}/,
size: { width: 200, height: 300, type: 'jpg' },
alt: 'ipsum',
},
{
title: 'Public images',
id: '#hero',
- regex: /^\/hero_\w{4,10}.jpg/,
+ regex: /^\/assets\/hero_\w{4,10}.jpg/,
size: { width: 768, height: 414, type: 'jpg' },
alt: 'Hero image',
},
@@ -290,35 +290,35 @@ describe('SSG pictures with subpath - build', function () {
{
title: 'Local images',
id: '#social-jpg',
- regex: /^\/docs\/social.\w{8}_\w{4,10}.jpg/,
+ regex: /^\/docs\/assets\/social.\w{8}_\w{4,10}.jpg/,
size: { width: 506, height: 253, type: 'jpg' },
alt: 'Social image',
},
{
title: 'Inline images',
id: '#inline',
- regex: /^\/docs\/social.\w{8}_\w{4,10}.jpg/,
+ regex: /^\/docs\/assets\/social.\w{8}_\w{4,10}.jpg/,
size: { width: 506, height: 253, type: 'jpg' },
alt: 'Inline social image',
},
{
title: 'Remote images',
id: '#google',
- regex: /^\/docs\/googlelogo_color_272x92dp_\w{4,10}.png/,
+ regex: /^\/docs\/assets\/googlelogo_color_272x92dp_\w{4,10}.png/,
size: { width: 544, height: 184, type: 'png' },
alt: 'Google logo',
},
{
title: 'Remote without file extension',
id: '#ipsum',
- regex: /^\/docs\/300_\w{4,10}/,
+ regex: /^\/docs\/assets\/300_\w{4,10}/,
size: { width: 200, height: 300, type: 'jpg' },
alt: 'ipsum',
},
{
title: 'Public images',
id: '#hero',
- regex: /^\/docs\/hero_\w{4,10}.jpg/,
+ regex: /^\/docs\/assets\/hero_\w{4,10}.jpg/,
size: { width: 768, height: 414, type: 'jpg' },
alt: 'Hero image',
},
diff --git a/packages/integrations/image/test/rotation.test.js b/packages/integrations/image/test/rotation.test.js
index 06f74d1c2..49fe198b1 100644
--- a/packages/integrations/image/test/rotation.test.js
+++ b/packages/integrations/image/test/rotation.test.js
@@ -32,7 +32,7 @@ describe('Image rotation', function () {
it('Landscape images', () => {
for (let i = 0; i < 9; i++) {
const image = $(`#landscape-${i}`);
- const regex = new RegExp(`\^/Landscape_${i}.\\w{8}_\\w{4,10}.jpg`);
+ const regex = new RegExp(`\^/assets\/Landscape_${i}.\\w{8}_\\w{4,10}.jpg`);
expect(image.attr('src')).to.match(regex);
expect(image.attr('width')).to.equal('1800');
@@ -49,7 +49,7 @@ describe('Image rotation', function () {
it('Portait images', () => {
for (let i = 0; i < 9; i++) {
const image = $(`#portrait-${i}`);
- const regex = new RegExp(`\^/Portrait_${i}.\\w{8}_\\w{4,10}.jpg`);
+ const regex = new RegExp(`\^/assets\/Portrait_${i}.\\w{8}_\\w{4,10}.jpg`);
expect(image.attr('src')).to.match(regex);
expect(image.attr('width')).to.equal('1200');
diff --git a/packages/integrations/image/test/with-mdx.test.js b/packages/integrations/image/test/with-mdx.test.js
index eb1a57202..963cd9b97 100644
--- a/packages/integrations/image/test/with-mdx.test.js
+++ b/packages/integrations/image/test/with-mdx.test.js
@@ -28,31 +28,31 @@ describe('Images in MDX - build', function () {
{
title: 'Local images',
id: '#social-jpg',
- regex: /^\/social.\w{8}_\w{4,10}.jpg/,
+ regex: /^\/assets\/social.\w{8}_\w{4,10}.jpg/,
size: { width: 506, height: 253, type: 'jpg' },
},
{
title: 'Inline imports',
id: '#inline',
- regex: /^\/social.\w{8}_\w{4,10}.jpg/,
+ regex: /^\/assets\/social.\w{8}_\w{4,10}.jpg/,
size: { width: 506, height: 253, type: 'jpg' },
},
{
title: 'Remote images',
id: '#google',
- regex: /^\/googlelogo_color_272x92dp_\w{4,10}.webp/,
+ regex: /^\/assets\/googlelogo_color_272x92dp_\w{4,10}.webp/,
size: { width: 544, height: 184, type: 'webp' },
},
{
title: 'Public images',
id: '#hero',
- regex: /^\/hero_\w{4,10}.webp/,
+ regex: /^\/assets\/hero_\w{4,10}.webp/,
size: { width: 768, height: 414, type: 'webp' },
},
{
title: 'Background color',
id: '#bg-color',
- regex: /^\/googlelogo_color_272x92dp_\w{4,10}.jpeg/,
+ regex: /^\/assets\/googlelogo_color_272x92dp_\w{4,10}.jpeg/,
size: { width: 544, height: 184, type: 'jpg' },
},
].forEach(({ title, id, regex, size }) => {
generated by cgit v1.2.3 (git 2.46.0) at 2025-08-25 14:13:59 +0000