summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Tony Sullivan <tony.f.sullivan@outlook.com> 2022-09-01 20:31:53 +0000
committerGravatar GitHub <noreply@github.com> 2022-09-01 20:31:53 +0000
commit56f83be92a6417bb1cbb88dd58c3dcaf5177b9b6 (patch)
treecdd1dbcd0a502ccd0d032640c1af3f8c12998dd8
parent9d86113114591edb697df2ca122c50294a812c20 (diff)
downloadastro-56f83be92a6417bb1cbb88dd58c3dcaf5177b9b6.tar.gz
astro-56f83be92a6417bb1cbb88dd58c3dcaf5177b9b6.tar.zst
astro-56f83be92a6417bb1cbb88dd58c3dcaf5177b9b6.zip
Fix: [@astrojs/image] handle filenames with spaces (#4593)
* fix: decode file URLs to handle filenames with spaces * chore: add changeset
Diffstat (limited to '')
-rw-r--r--.changeset/twelve-singers-accept.md5
-rw-r--r--packages/integrations/image/src/vite-plugin-astro-image.ts3
-rw-r--r--packages/integrations/image/test/fixtures/basic-image/src/assets/blog/introducing astro.jpg (renamed from packages/integrations/image/test/fixtures/basic-image/src/assets/blog/introducing-astro.jpg)bin276382 -> 276382 bytes
-rw-r--r--packages/integrations/image/test/fixtures/basic-image/src/pages/index.astro3
-rw-r--r--packages/integrations/image/test/image-ssg.test.js24
-rw-r--r--packages/integrations/image/test/image-ssr-build.test.js12
-rw-r--r--packages/integrations/image/test/image-ssr-dev.test.js14
7 files changed, 60 insertions, 1 deletions
diff --git a/.changeset/twelve-singers-accept.md b/.changeset/twelve-singers-accept.md
new file mode 100644
index 000000000..5644d387d
--- /dev/null
+++ b/.changeset/twelve-singers-accept.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/image': patch
+---
+
+Fixes a bug that broke support for local images with spaces in the filename
diff --git a/packages/integrations/image/src/vite-plugin-astro-image.ts b/packages/integrations/image/src/vite-plugin-astro-image.ts
index 25945ef9c..f19c557c3 100644
--- a/packages/integrations/image/src/vite-plugin-astro-image.ts
+++ b/packages/integrations/image/src/vite-plugin-astro-image.ts
@@ -55,7 +55,8 @@ export function createPlugin(config: AstroConfig, options: Required<IntegrationO
}
if (!this.meta.watchMode) {
- const filename = basename(url.pathname, extname(url.pathname)) + `.${meta.format}`;
+ const pathname = decodeURI(url.pathname);
+ const filename = basename(pathname, extname(pathname) + `.${meta.format}`);
const handle = this.emitFile({
name: filename,
diff --git a/packages/integrations/image/test/fixtures/basic-image/src/assets/blog/introducing-astro.jpg b/packages/integrations/image/test/fixtures/basic-image/src/assets/blog/introducing astro.jpg
index c58aacf66..c58aacf66 100644
--- a/packages/integrations/image/test/fixtures/basic-image/src/assets/blog/introducing-astro.jpg
+++ b/packages/integrations/image/test/fixtures/basic-image/src/assets/blog/introducing astro.jpg
Binary files differ
diff --git a/packages/integrations/image/test/fixtures/basic-image/src/pages/index.astro b/packages/integrations/image/test/fixtures/basic-image/src/pages/index.astro
index 85d028171..4ded85521 100644
--- a/packages/integrations/image/test/fixtures/basic-image/src/pages/index.astro
+++ b/packages/integrations/image/test/fixtures/basic-image/src/pages/index.astro
@@ -1,5 +1,6 @@
---
import socialJpg from '../assets/social.jpg';
+import introJpg from '../assets/blog/introducing astro.jpg';
import { Image } from '@astrojs/image/components';
---
@@ -10,6 +11,8 @@ import { Image } from '@astrojs/image/components';
<body>
<Image id="hero" src="/hero.jpg" width={768} height={414} format="webp" />
<br />
+ <Image id="spaces" src={introJpg} width={768} height={414} format="webp" />
+ <br />
<Image id="social-jpg" src={socialJpg} width={506} height={253} />
<br />
<Image id="google" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width={544} height={184} format="webp" />
diff --git a/packages/integrations/image/test/image-ssg.test.js b/packages/integrations/image/test/image-ssg.test.js
index d93f23de8..04d62125d 100644
--- a/packages/integrations/image/test/image-ssg.test.js
+++ b/packages/integrations/image/test/image-ssg.test.js
@@ -28,6 +28,12 @@ describe('SSG images - dev', function () {
query: { f: 'jpg', w: '506', h: '253' },
},
{
+ title: 'Filename with spaces',
+ id: '#spaces',
+ url: '/@astroimage/assets/blog/introducing astro.jpg',
+ query: { f: 'webp', w: '768', h: '414' },
+ },
+ {
title: 'Inline imports',
id: '#inline',
url: '/@astroimage/assets/social.jpg',
@@ -92,6 +98,12 @@ describe('SSG images with subpath - dev', function () {
query: { f: 'jpg', w: '506', h: '253' },
},
{
+ title: 'Filename with spaces',
+ id: '#spaces',
+ url: '/@astroimage/assets/blog/introducing astro.jpg',
+ query: { f: 'webp', w: '768', h: '414' },
+ },
+ {
title: 'Inline imports',
id: '#inline',
url: '/@astroimage/assets/social.jpg',
@@ -160,6 +172,12 @@ describe('SSG images - build', function () {
size: { width: 506, height: 253, type: 'jpg' },
},
{
+ title: 'Filename with spaces',
+ id: '#spaces',
+ regex: /^\/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/,
@@ -218,6 +236,12 @@ describe('SSG images with subpath - build', function () {
size: { width: 506, height: 253, type: 'jpg' },
},
{
+ title: 'Filename with spaces',
+ id: '#spaces',
+ regex: /^\/docs\/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/,
diff --git a/packages/integrations/image/test/image-ssr-build.test.js b/packages/integrations/image/test/image-ssr-build.test.js
index 1d45ed234..888397d99 100644
--- a/packages/integrations/image/test/image-ssr-build.test.js
+++ b/packages/integrations/image/test/image-ssr-build.test.js
@@ -23,6 +23,12 @@ describe('SSR images - build', async function () {
query: { f: 'jpg', w: '506', h: '253', href: /^\/assets\/social.\w{8}.jpg/ },
},
{
+ title: 'Filename with spaces',
+ id: '#spaces',
+ url: '/_image',
+ query: { f: 'webp', w: '768', h: '414', href: /^\/assets\/introducing astro.\w{8}.jpg/ },
+ },
+ {
title: 'Inline imports',
id: '#inline',
url: '/_image',
@@ -106,6 +112,12 @@ describe('SSR images with subpath - build', function () {
query: { f: 'jpg', w: '506', h: '253', href: /^\/docs\/assets\/social.\w{8}.jpg/ },
},
{
+ title: 'Filename with spaces',
+ id: '#spaces',
+ url: '/_image',
+ query: { f: 'webp', w: '768', h: '414', href: /^\/docs\/assets\/introducing astro.\w{8}.jpg/ },
+ },
+ {
title: 'Inline imports',
id: '#inline',
url: '/_image',
diff --git a/packages/integrations/image/test/image-ssr-dev.test.js b/packages/integrations/image/test/image-ssr-dev.test.js
index c34973de9..a280268d0 100644
--- a/packages/integrations/image/test/image-ssr-dev.test.js
+++ b/packages/integrations/image/test/image-ssr-dev.test.js
@@ -33,6 +33,13 @@ describe('SSR images - dev', function () {
contentType: 'image/jpeg',
},
{
+ title: 'Filename with spaces',
+ id: '#spaces',
+ url: '/@astroimage/assets/blog/introducing astro.jpg',
+ query: { f: 'webp', w: '768', h: '414' },
+ contentType: 'image/webp',
+ },
+ {
title: 'Inline imports',
id: '#inline',
url: '/@astroimage/assets/social.jpg',
@@ -117,6 +124,13 @@ describe('SSR images with subpath - dev', function () {
contentType: 'image/jpeg',
},
{
+ title: 'Filename with spaces',
+ id: '#spaces',
+ url: '/@astroimage/assets/blog/introducing astro.jpg',
+ query: { f: 'webp', w: '768', h: '414' },
+ contentType: 'image/webp',
+ },
+ {
title: 'Inline imports',
id: '#inline',
url: '/@astroimage/assets/social.jpg',
generated by cgit v1.2.3 (git 2.46.0) at 2025-08-19 16:02:01 +0000