diff options
| author |  Wooseop Kim <wooseop@protonmail.com>
| 2023-06-22 16:56:41 +0900 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2023-06-22 15:56:41 +0800 |
| commit | 9739adc91f967a59f50dd8c2862e7e4b2bcf74b4 (patch) | |
| tree | d3a236f755598bfbd8cc7ed4d05cc4de5090fc4d | |
| parent | 33cdc8622a56c8e5465b7a50f627ecc568870c6b (diff) | |
| download | astro-9739adc91f967a59f50dd8c2862e7e4b2bcf74b4.tar.gz astro-9739adc91f967a59f50dd8c2862e7e4b2bcf74b4.tar.zst astro-9739adc91f967a59f50dd8c2862e7e4b2bcf74b4.zip | |
fix: encode spaces when generating `srcset` (#7340)
| -rw-r--r-- | .changeset/late-steaks-perform.md | 5 | ||||
| -rw-r--r-- | packages/integrations/image/package.json | 1 | ||||
| -rw-r--r-- | packages/integrations/image/src/lib/get-picture.ts | 2 | ||||
| -rw-r--r-- | packages/integrations/image/test/picture-ssg.test.js | 12 | ||||
| -rw-r--r-- | pnpm-lock.yaml | 3 |
5 files changed, 22 insertions, 1 deletions
diff --git a/.changeset/late-steaks-perform.md b/.changeset/late-steaks-perform.md new file mode 100644 index 000000000..f63b32235 --- /dev/null +++ b/.changeset/late-steaks-perform.md @@ -0,0 +1,5 @@ +--- +'@astrojs/image': patch +--- + +Fix problem where filenames with spaces produce invalid srcset attributes diff --git a/packages/integrations/image/package.json b/packages/integrations/image/package.json index 77f1fac46..d71b28655 100644 --- a/packages/integrations/image/package.json +++ b/packages/integrations/image/package.json @@ -59,6 +59,7 @@ "mocha": "^9.2.2", "rollup-plugin-copy": "^3.4.0", "sharp": "^0.32.1", + "srcset-parse": "^1.1.0", "vite": "^4.3.9" }, "peerDependencies": { diff --git a/packages/integrations/image/src/lib/get-picture.ts b/packages/integrations/image/src/lib/get-picture.ts index 594cb3dc2..53b9aea8a 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<GetPictureRe image = img; } - return `${img.src} ${width}w`; + return `${encodeURI(img.src ?? '')} ${width}w`; }) ); diff --git a/packages/integrations/image/test/picture-ssg.test.js b/packages/integrations/image/test/picture-ssg.test.js index 985058192..61b4f8e2b 100644 --- a/packages/integrations/image/test/picture-ssg.test.js +++ b/packages/integrations/image/test/picture-ssg.test.js @@ -6,6 +6,9 @@ import path from 'path'; import { fileURLToPath, pathToFileURL } from 'node:url'; import { join } from 'node:path'; import { loadFixture } from './test-utils.js'; +import srcsetParse from 'srcset-parse'; + +const matchSrcset = srcsetParse.default; const __dirname = fileURLToPath(new URL('.', import.meta.url)); const toAstroImage = (relpath) => @@ -96,6 +99,11 @@ describe('SSG pictures - dev', function () { const sources = picture.children('source'); expect(sources.length).to.equal(3); + sources.each((_, el) => { + const srcset = $(el).attr('srcset'); + expect(matchSrcset(srcset).length).to.equal(2); + }); + const src = image.attr('src'); const [route, params] = src.split('?'); @@ -293,6 +301,8 @@ describe('SSG pictures - build', function () { const source = $(el); const srcset = source.attr('srcset'); + expect(matchSrcset(srcset).length).to.equal(2); + for (const src of srcset.split(',')) { const segments = src.split(' '); @@ -400,6 +410,8 @@ describe('SSG pictures with subpath - build', function () { const source = $(el); const srcset = source.attr('srcset'); + expect(matchSrcset(srcset).length).to.equal(2); + for (const src of srcset.split(',')) { const [pathname, width] = src.split(' '); const widthNum = parseInt(width.substring(0, width.length - 1)); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3e3539ef7..6bad3e993 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3790,6 +3790,9 @@ importers: sharp: specifier: ^0.32.1 version: 0.32.1 + srcset-parse: + specifier: ^1.1.0 + version: 1.1.0 vite: specifier: ^4.3.9 version: 4.3.9(@types/node@18.16.18)(sass@1.63.4) |