diff --git a/.changeset/few-ants-brake.md b/.changeset/few-ants-brake.md new file mode 100644 index 0000000000..607c248ae5 --- /dev/null +++ b/.changeset/few-ants-brake.md @@ -0,0 +1,5 @@ +--- +"@astrojs/image": patch +--- + +fix: make `Picture` generate valid dev URLs diff --git a/packages/integrations/image/src/lib/get-picture.ts b/packages/integrations/image/src/lib/get-picture.ts index 53b9aea8ab..c0eaa40588 100644 --- a/packages/integrations/image/src/lib/get-picture.ts +++ b/packages/integrations/image/src/lib/get-picture.ts @@ -85,7 +85,7 @@ export async function getPicture(params: GetPictureParams): Promise source.attribs['srcset'])) { + for (const pictureSrc of srcset.split(',')) { + const pictureParams = pictureSrc.split('?')[1]; + + const expected = new URLSearchParams(params).get('href'); + const actual = new URLSearchParams(pictureParams).get('href').replace(/\s+\d+w$/, ''); + expect(expected).to.equal(actual); + } + } + expect(route).to.equal(url); const searchParams = new URLSearchParams(params); diff --git a/packages/integrations/image/test/picture-ssr-build.test.js b/packages/integrations/image/test/picture-ssr-build.test.js index 5e760d0b43..6c06fd1fc9 100644 --- a/packages/integrations/image/test/picture-ssr-build.test.js +++ b/packages/integrations/image/test/picture-ssr-build.test.js @@ -223,6 +223,16 @@ describe('SSR pictures with subpath - build', function () { const src = image.attr('src'); const [route, params] = src.split('?'); + for (const srcset of picture.children('source').map((_, source) => source.attribs['srcset'])) { + for (const pictureSrc of srcset.split(',')) { + const pictureParams = pictureSrc.split('?')[1]; + + const expected = new URLSearchParams(params).get('href'); + const actual = new URLSearchParams(pictureParams).get('href').replace(/\s+\d+w$/, ''); + expect(expected).to.equal(actual); + } + } + expect(route).to.equal(url); const searchParams = new URLSearchParams(params); diff --git a/packages/integrations/image/test/picture-ssr-dev.test.js b/packages/integrations/image/test/picture-ssr-dev.test.js index 325e0d08b4..39a5431dc9 100644 --- a/packages/integrations/image/test/picture-ssr-dev.test.js +++ b/packages/integrations/image/test/picture-ssr-dev.test.js @@ -127,6 +127,16 @@ describe('SSR pictures - dev', function () { const src = image.attr('src'); const [route, params] = src.split('?'); + for (const srcset of picture.children('source').map((_, source) => source.attribs['srcset'])) { + for (const pictureSrc of srcset.split(',')) { + const pictureParams = pictureSrc.split('?')[1]; + + const expected = new URLSearchParams(params).get('href'); + const actual = new URLSearchParams(pictureParams).get('href').replace(/\s+\d+w$/, ''); + expect(expected).to.equal(actual); + } + } + expect(route).to.equal(url); const searchParams = new URLSearchParams(params);