diff options
| -rw-r--r-- | .changeset/weak-oranges-relate.md | 5 | ||||
| -rw-r--r-- | packages/astro/src/assets/vite-plugin-assets.ts | 6 | ||||
| -rw-r--r-- | packages/astro/test/core-image.test.js | 11 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/core-image-ssg/src/assets/image 1.jpg | bin | 0 -> 8674 bytes | |||
| -rw-r--r-- | packages/astro/test/fixtures/core-image-ssg/src/pages/srcset.astro | 14 |
5 files changed, 34 insertions, 2 deletions
diff --git a/.changeset/weak-oranges-relate.md b/.changeset/weak-oranges-relate.md new file mode 100644 index 000000000..c61c4b7e0 --- /dev/null +++ b/.changeset/weak-oranges-relate.md @@ -0,0 +1,5 @@ +--- +"astro": patch +--- + +`<Image />` srcset now parses encoded paths correctly diff --git a/packages/astro/src/assets/vite-plugin-assets.ts b/packages/astro/src/assets/vite-plugin-assets.ts index 8dfd86d66..85868f6e1 100644 --- a/packages/astro/src/assets/vite-plugin-assets.ts +++ b/packages/astro/src/assets/vite-plugin-assets.ts @@ -132,10 +132,12 @@ export default function assets({ }); } + // The paths here are used for URLs, so we need to make sure they have the proper format for an URL + // (leading slash, prefixed with the base / assets prefix, encoded, etc) if (settings.config.build.assetsPrefix) { - return joinPaths(settings.config.build.assetsPrefix, finalFilePath); + return encodeURI(joinPaths(settings.config.build.assetsPrefix, finalFilePath)); } else { - return prependForwardSlash(joinPaths(settings.config.base, finalFilePath)); + return encodeURI(prependForwardSlash(joinPaths(settings.config.base, finalFilePath))); } }; }, diff --git a/packages/astro/test/core-image.test.js b/packages/astro/test/core-image.test.js index 9d9ca92b8..3c2ff8899 100644 --- a/packages/astro/test/core-image.test.js +++ b/packages/astro/test/core-image.test.js @@ -945,6 +945,17 @@ describe('astro:image', () => { expect(data).to.be.an.instanceOf(Buffer); }); + it('client images srcset parsed correctly', async () => { + const html = await fixture.readFile('/srcset/index.html'); + const $ = cheerio.load(html); + const srcset = $('#local-2-widths-with-spaces img').attr('srcset'); + + // Find image + const regex = /^(.+?) [0-9]+[wx]$/gm; + const imageSrcset = regex.exec(srcset)[1]; + expect(imageSrcset).to.not.contain(' '); + }); + it('supports images with encoded characters in url', async () => { const html = await fixture.readFile('/index.html'); const $ = cheerio.load(html); diff --git a/packages/astro/test/fixtures/core-image-ssg/src/assets/image 1.jpg b/packages/astro/test/fixtures/core-image-ssg/src/assets/image 1.jpg Binary files differnew file mode 100644 index 000000000..66c86497e --- /dev/null +++ b/packages/astro/test/fixtures/core-image-ssg/src/assets/image 1.jpg diff --git a/packages/astro/test/fixtures/core-image-ssg/src/pages/srcset.astro b/packages/astro/test/fixtures/core-image-ssg/src/pages/srcset.astro new file mode 100644 index 000000000..64821825a --- /dev/null +++ b/packages/astro/test/fixtures/core-image-ssg/src/pages/srcset.astro @@ -0,0 +1,14 @@ +--- +import { Image } from "astro:assets"; +import imageWithSpaces from "../assets/image 1.jpg"; +--- + +<div id="local-2-widths-with-spaces"> + <!-- + In this example, only two images should be generated : + - The base image + - The 2x image + Additionally, the image URL should be encoded to avoid issues with spaces and other special characters. + --> + <Image src={imageWithSpaces} width={imageWithSpaces.width / 2} widths={[imageWithSpaces.width]} alt="" /> +</div> |
