Skip to content

Commit

Permalink
Fix: [@astrojs/image] handle filenames with spaces (#4593)
Browse files Browse the repository at this point in the history 
* fix: decode file URLs to handle filenames with spaces

* chore: add changeset
  • Loading branch information
Tony Sullivan committed Sep 1, 2022
1 parent 9d86113 commit 56f83be
Show file tree
Hide file tree
Showing 7 changed files with 60 additions and 1 deletion.
5 changes: 5 additions & 0 deletions .changeset/twelve-singers-accept.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@astrojs/image': patch
---

Fixes a bug that broke support for local images with spaces in the filename
3 changes: 2 additions & 1 deletion packages/integrations/image/src/vite-plugin-astro-image.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
0 ...age/src/assets/blog/introducing-astro.jpg → ...age/src/assets/blog/introducing astro.jpg
View file
File renamed without changes
3 changes: 3 additions & 0 deletions packages/integrations/image/test/fixtures/basic-image/src/pages/index.astro
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
---
import socialJpg from '../assets/social.jpg';
import introJpg from '../assets/blog/introducing astro.jpg';
import { Image } from '@astrojs/image/components';
---

Expand All @@ -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" />
Expand Down
24 changes: 24 additions & 0 deletions packages/integrations/image/test/image-ssg.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,12 @@ describe('SSG images - dev', function () {
url: '/@astroimage/assets/social.jpg',
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',
Expand Down Expand Up @@ -91,6 +97,12 @@ describe('SSG images with subpath - dev', function () {
url: '/@astroimage/assets/social.jpg',
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',
Expand Down Expand Up @@ -159,6 +171,12 @@ describe('SSG images - build', function () {
regex: /^\/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/,
size: { width: 768, height: 414, type: 'webp' },
},
{
title: 'Inline imports',
id: '#inline',
Expand Down Expand Up @@ -217,6 +235,12 @@ describe('SSG images with subpath - build', function () {
regex: /^\/docs\/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/,
size: { width: 768, height: 414, type: 'webp' },
},
{
title: 'Inline imports',
id: '#inline',
Expand Down
12 changes: 12 additions & 0 deletions packages/integrations/image/test/image-ssr-build.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,12 @@ describe('SSR images - build', async function () {
url: '/_image',
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',
Expand Down Expand Up @@ -105,6 +111,12 @@ describe('SSR images with subpath - build', function () {
url: '/_image',
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',
Expand Down
14 changes: 14 additions & 0 deletions packages/integrations/image/test/image-ssr-dev.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,13 @@ describe('SSR images - dev', function () {
query: { f: 'jpg', w: '506', h: '253' },
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',
Expand Down Expand Up @@ -116,6 +123,13 @@ describe('SSR images with subpath - dev', function () {
query: { f: 'jpg', w: '506', h: '253' },
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',
Expand Down

0 comments on commit 56f83be

Please sign in to comment.