summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Oskar Baumann <62597223+panwauu@users.noreply.github.com> 2022-10-06 17:53:11 +0200
committerGravatar GitHub <noreply@github.com> 2022-10-06 15:53:11 +0000
commita2b66c754969af4ce98bb10654286a4445cb0999 (patch)
tree576936f358e6a5019ba2f9e58f658f57563d58a7
parenteaa019f49ddbde9715acf4e6adee14d88ba3aebf (diff)
downloadastro-a2b66c754969af4ce98bb10654286a4445cb0999.tar.gz
astro-a2b66c754969af4ce98bb10654286a4445cb0999.tar.zst
astro-a2b66c754969af4ce98bb10654286a4445cb0999.zip
[@astrojs/image]: Fix <Picture /> component with query string (#4997)
* remove query params from file extension * Revert changes to make change as small as possible * moving the removeQueryParam check to basename() * chore: adding a changeset * adding SSR test coverage for new picture test cases Co-authored-by: Tony Sullivan <tony.f.sullivan@outlook.com>
Diffstat
-rw-r--r--.changeset/large-bananas-prove.md5
-rw-r--r--packages/integrations/image/src/utils/paths.ts4
-rw-r--r--packages/integrations/image/test/fixtures/basic-picture/src/assets/blog/introducing astro.jpg (renamed from packages/integrations/image/test/fixtures/basic-picture/src/assets/blog/introducing-astro.jpg)bin276382 -> 276382 bytes
-rw-r--r--packages/integrations/image/test/fixtures/basic-picture/src/pages/index.astro5
-rw-r--r--packages/integrations/image/test/picture-ssg.test.js29
-rw-r--r--packages/integrations/image/test/picture-ssr-build.test.js14
-rw-r--r--packages/integrations/image/test/picture-ssr-dev.test.js16
7 files changed, 70 insertions, 3 deletions
diff --git a/.changeset/large-bananas-prove.md b/.changeset/large-bananas-prove.md
new file mode 100644
index 000000000..da3467950
--- /dev/null
+++ b/.changeset/large-bananas-prove.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/image': patch
+---
+
+Fixes a bug that lost query parameters for remote images in the `<Picture />` component
diff --git a/packages/integrations/image/src/utils/paths.ts b/packages/integrations/image/src/utils/paths.ts
index cd21da95d..556505704 100644
--- a/packages/integrations/image/src/utils/paths.ts
+++ b/packages/integrations/image/src/utils/paths.ts
@@ -18,7 +18,7 @@ export function extname(src: string) {
return '';
}
- return src.substring(src.length - (base.length - index));
+ return base.substring(index);
}
function removeExtname(src: string) {
@@ -32,7 +32,7 @@ function removeExtname(src: string) {
}
function basename(src: string) {
- return src.replace(/^.*[\\\/]/, '');
+ return removeQueryString(src.replace(/^.*[\\\/]/, ''));
}
export function propsToFilename(transform: TransformOptions) {
diff --git a/packages/integrations/image/test/fixtures/basic-picture/src/assets/blog/introducing-astro.jpg b/packages/integrations/image/test/fixtures/basic-picture/src/assets/blog/introducing astro.jpg
index c58aacf66..c58aacf66 100644
--- a/packages/integrations/image/test/fixtures/basic-picture/src/assets/blog/introducing-astro.jpg
+++ b/packages/integrations/image/test/fixtures/basic-picture/src/assets/blog/introducing astro.jpg
Binary files differ
diff --git a/packages/integrations/image/test/fixtures/basic-picture/src/pages/index.astro b/packages/integrations/image/test/fixtures/basic-picture/src/pages/index.astro
index 98aac062d..7cc20d65f 100644
--- a/packages/integrations/image/test/fixtures/basic-picture/src/pages/index.astro
+++ b/packages/integrations/image/test/fixtures/basic-picture/src/pages/index.astro
@@ -1,5 +1,6 @@
---
import socialJpg from '../assets/social.jpg';
+import introJpg from '../assets/blog/introducing astro.jpg';
import { Picture } from '@astrojs/image/components';
---
@@ -10,6 +11,8 @@ import { Picture } from '@astrojs/image/components';
<body>
<Picture id="hero" src="/hero.jpg" sizes="100vw" widths={[384, 768]} aspectRatio={768/414} alt="Hero image" />
<br />
+ <Picture id="spaces" src={introJpg} sizes="100vw" widths={[384, 768]} aspectRatio={768/414} alt="spaces" />
+ <br />
<Picture id="social-jpg" src={socialJpg} sizes="(min-width: 640px) 50vw, 100vw" widths={[253, 506]} alt="Social image" />
<br />
<Picture id="google" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" sizes="(min-width: 640px) 50vw, 100vw" widths={[272, 544]} aspectRatio={544/184} alt="Google logo" formats={["avif", "webp", "png"]} />
@@ -19,5 +22,7 @@ import { Picture } from '@astrojs/image/components';
<Picture id="bg-color" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" sizes="(min-width: 640px) 50vw, 100vw" widths={[272, 544]} aspectRatio={544/184} alt="Google logo" background="rgb(51, 51, 51)" formats={['avif', 'jpeg']} />
<br />
<Picture id="ipsum" src="https://dummyimage.com/200x300" sizes="100vw" widths={[100, 200]} aspectRatio={2/3} formats={["avif", "webp", "jpg"]} alt="ipsum" />
+ <br />
+ <Picture id="query" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png?token=abc" sizes="100vw" widths={[544]} aspectRatio={544/184} alt="query" />
</body>
</html>
diff --git a/packages/integrations/image/test/picture-ssg.test.js b/packages/integrations/image/test/picture-ssg.test.js
index a997b57f1..0b99e4933 100644
--- a/packages/integrations/image/test/picture-ssg.test.js
+++ b/packages/integrations/image/test/picture-ssg.test.js
@@ -31,6 +31,13 @@ describe('SSG pictures - dev', function () {
alt: 'Social image',
},
{
+ title: 'Filename with spaces',
+ id: '#spaces',
+ url: '/@astroimage/assets/blog/introducing astro.jpg',
+ query: { f: 'jpg', w: '768', h: '414' },
+ alt: 'spaces'
+ },
+ {
title: 'Inline imports',
id: '#inline',
url: '/@astroimage/assets/social.jpg',
@@ -117,6 +124,13 @@ describe('SSG pictures with subpath - dev', function () {
alt: 'Social image',
},
{
+ title: 'Filename with spaces',
+ id: '#spaces',
+ url: '/@astroimage/assets/blog/introducing astro.jpg',
+ query: { f: 'jpg', w: '768', h: '414' },
+ alt: 'spaces'
+ },
+ {
title: 'Inline imports',
id: '#inline',
url: '/@astroimage/assets/social.jpg',
@@ -200,6 +214,13 @@ describe('SSG pictures - build', function () {
alt: 'Social image',
},
{
+ title: 'Filename with spaces',
+ id: '#spaces',
+ regex: /^\/assets\/introducing astro.\w{8}_\w{4,10}.jpg/,
+ size: { width: 768, height: 414, type: 'jpg' },
+ alt: 'spaces',
+ },
+ {
title: 'Inline images',
id: '#inline',
regex: /^\/assets\/social.\w{8}_\w{4,10}.jpg/,
@@ -244,7 +265,13 @@ describe('SSG pictures - build', function () {
const srcset = source.attr('srcset');
for (const src of srcset.split(',')) {
- const [pathname, width] = src.split(' ');
+ const segments = src.split(' ');
+
+ // filenames may have a space in them, pop the last item for the
+ // width and join the other segments back for the filepath
+ const width = segments.pop();
+ const pathname = segments.join(' ');
+
const widthNum = parseInt(width.substring(0, width.length - 1));
verifyImage(pathname, {
diff --git a/packages/integrations/image/test/picture-ssr-build.test.js b/packages/integrations/image/test/picture-ssr-build.test.js
index f70543def..b76585240 100644
--- a/packages/integrations/image/test/picture-ssr-build.test.js
+++ b/packages/integrations/image/test/picture-ssr-build.test.js
@@ -24,6 +24,13 @@ describe('SSR pictures - build', function () {
alt: 'Social image',
},
{
+ title: 'Filename with spaces',
+ id: '#spaces',
+ url: '/_image',
+ query: { w: '768', h: '414', f: 'jpg', href: /^\/assets\/introducing astro.\w{8}.jpg/ },
+ alt: 'spaces',
+ },
+ {
title: 'Inline imports',
id: '#inline',
url: '/_image',
@@ -128,6 +135,13 @@ describe('SSR pictures with subpath - build', function () {
alt: 'Social image',
},
{
+ title: 'Filename with spaces',
+ id: '#spaces',
+ url: '/_image',
+ query: { w: '768', h: '414', f: 'jpg', href: /^\/docs\/assets\/introducing astro.\w{8}.jpg/ },
+ alt: 'spaces',
+ },
+ {
title: 'Inline imports',
id: '#inline',
url: '/_image',
diff --git a/packages/integrations/image/test/picture-ssr-dev.test.js b/packages/integrations/image/test/picture-ssr-dev.test.js
index 98be066d7..10d8f65cd 100644
--- a/packages/integrations/image/test/picture-ssr-dev.test.js
+++ b/packages/integrations/image/test/picture-ssr-dev.test.js
@@ -34,6 +34,14 @@ describe('SSR pictures - dev', function () {
alt: 'Social image',
},
{
+ title: 'Filename with spaces',
+ id: '#spaces',
+ url: '/@astroimage/assets/blog/introducing astro.jpg',
+ query: { w: '768', h: '414', f: 'jpg' },
+ contentType: 'image/jpeg',
+ alt: 'spaces',
+ },
+ {
title: 'Inline imports',
id: '#inline',
url: '/@astroimage/assets/social.jpg',
@@ -155,6 +163,14 @@ describe('SSR pictures with subpath - dev', function () {
alt: 'Social image',
},
{
+ title: 'Filename with spaces',
+ id: '#spaces',
+ url: '/@astroimage/assets/blog/introducing astro.jpg',
+ query: { w: '768', h: '414', f: 'jpg' },
+ contentType: 'image/jpeg',
+ alt: 'spaces',
+ },
+ {
title: 'Inline imports',
id: '#inline',
url: '/@astroimage/assets/social.jpg',
generated by cgit v1.2.3 (git 2.46.0) at 2025-08-15 10:42:49 +0000