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

[@astrojs/image]: Fix <Picture /> component with query string (#4997)

Browse source 
* 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>
This commit is contained in:
Oskar Baumann 2022-10-06 17:53:11 +02:00 committed by GitHub
parent eaa019f49d
commit a2b66c7549
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 70 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/large-bananas-prove.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/image': patch
---
Fixes a bug that lost query parameters for remote images in the `<Picture />` component

4
packages/integrations/image/src/utils/paths.ts
View file

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

0
packages/integrations/image/test/fixtures/basic-picture/src/assets/blog/introducing-astro.jpg → packages/integrations/image/test/fixtures/basic-picture/src/assets/blog/introducing astro.jpg vendored
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 270 KiB

After

Width:  |  Height:  |  Size: 270 KiB

5
packages/integrations/image/test/fixtures/basic-picture/src/pages/index.astro vendored
View file

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

29
packages/integrations/image/test/picture-ssg.test.js
View file

@ -30,6 +30,13 @@ describe('SSG pictures - dev', function () {
query: { f: 'jpg', w: '506', h: '253' },
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',
@ -116,6 +123,13 @@ describe('SSG pictures with subpath - dev', function () {
query: { f: 'jpg', w: '506', h: '253' },
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',
@ -199,6 +213,13 @@ describe('SSG pictures - build', function () {
size: { width: 506, height: 253, type: 'jpg' },
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',
@ -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, {

14
packages/integrations/image/test/picture-ssr-build.test.js
View file

@ -23,6 +23,13 @@ describe('SSR pictures - build', function () {
query: { f: 'jpg', w: '506', h: '253', href: /^\/assets\/social.\w{8}.jpg/ },
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',
@ -127,6 +134,13 @@ describe('SSR pictures with subpath - build', function () {
query: { f: 'jpg', w: '506', h: '253', href: /^\/docs\/assets\/social.\w{8}.jpg/ },
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',

16
packages/integrations/image/test/picture-ssr-dev.test.js
View file

@ -33,6 +33,14 @@ describe('SSR pictures - dev', function () {
contentType: 'image/jpeg',
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',
@ -154,6 +162,14 @@ describe('SSR pictures with subpath - dev', function () {
contentType: 'image/jpeg',
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',