diff options
| author |  Matthew Phillips <matthew@skypack.dev>
| 2023-12-28 15:08:04 -0500 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2023-12-28 15:08:04 -0500 |
| commit | 7f212f0831d8cd899a86fb94899a7cad8ec280db (patch) | |
| tree | ddca3f474a74c77a53f577a1b85f5878ca3822c1 | |
| parent | b34bd2b2d9f85a4de397191bf19fadd3af284be6 (diff) | |
| download | astro-7f212f0831d8cd899a86fb94899a7cad8ec280db.tar.gz astro-7f212f0831d8cd899a86fb94899a7cad8ec280db.tar.zst astro-7f212f0831d8cd899a86fb94899a7cad8ec280db.zip | |
Support remote images with encoded characters (#9540)
* Support remote images with encoded characters
* Add a changeset
* Update .changeset/small-snakes-build.md
Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>
---------
Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>
| -rw-r--r-- | .changeset/small-snakes-build.md | 5 | ||||
| -rw-r--r-- | packages/astro/src/assets/utils/transformToPath.ts | 2 | ||||
| -rw-r--r-- | packages/astro/test/core-image.test.js | 11 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/core-image-ssg/public/documents/ProductCoverImages/ghost.webp | bin | 0 -> 36138 bytes | |||
| -rw-r--r-- | packages/astro/test/fixtures/core-image-ssg/src/pages/index.astro | 4 |
5 files changed, 20 insertions, 2 deletions
diff --git a/.changeset/small-snakes-build.md b/.changeset/small-snakes-build.md new file mode 100644 index 000000000..9f1c9f8ac --- /dev/null +++ b/.changeset/small-snakes-build.md @@ -0,0 +1,5 @@ +--- +"astro": patch +--- + +Fixes remote images with encoded characters diff --git a/packages/astro/src/assets/utils/transformToPath.ts b/packages/astro/src/assets/utils/transformToPath.ts index affeea8eb..dd8d17fbe 100644 --- a/packages/astro/src/assets/utils/transformToPath.ts +++ b/packages/astro/src/assets/utils/transformToPath.ts @@ -10,7 +10,7 @@ export function propsToFilename(transform: ImageTransform, hash: string) { isESMImportedImage(transform.src) ? transform.src.src : transform.src ); const ext = extname(filename); - filename = basename(filename, ext); + filename = decodeURIComponent(basename(filename, ext)); let outputExt = transform.format ? `.${transform.format}` : ext; return `/${filename}_${hash}${outputExt}`; diff --git a/packages/astro/test/core-image.test.js b/packages/astro/test/core-image.test.js index 0d9b690b4..9dcf0fae5 100644 --- a/packages/astro/test/core-image.test.js +++ b/packages/astro/test/core-image.test.js @@ -747,7 +747,7 @@ describe('astro:image', () => { root: './fixtures/core-image-ssg/', image: { service: testImageService(), - domains: ['astro.build'], + domains: ['astro.build', 'avatars.githubusercontent.com'], }, }); // Remove cache directory @@ -945,6 +945,15 @@ describe('astro:image', () => { expect(data).to.be.an.instanceOf(Buffer); }); + it('supports images with encoded characters in url', async () => { + const html = await fixture.readFile('/index.html'); + const $ = cheerio.load(html); + const img = $('#encoded-chars img'); + const src = img.attr('src') + const data = await fixture.readFile(src); + expect(data).to.not.be.undefined; + }); + describe('custom service in build', () => { it('uses configured hashes properties', async () => { await fixture.build(); diff --git a/packages/astro/test/fixtures/core-image-ssg/public/documents/ProductCoverImages/ghost.webp b/packages/astro/test/fixtures/core-image-ssg/public/documents/ProductCoverImages/ghost.webp Binary files differnew file mode 100644 index 000000000..9c5d391ac --- /dev/null +++ b/packages/astro/test/fixtures/core-image-ssg/public/documents/ProductCoverImages/ghost.webp diff --git a/packages/astro/test/fixtures/core-image-ssg/src/pages/index.astro b/packages/astro/test/fixtures/core-image-ssg/src/pages/index.astro index d7f9b0551..43dc5613d 100644 --- a/packages/astro/test/fixtures/core-image-ssg/src/pages/index.astro +++ b/packages/astro/test/fixtures/core-image-ssg/src/pages/index.astro @@ -14,5 +14,9 @@ import myImage from "../assets/penguin1.jpg"; <div id="remote"> <Image src="https://avatars.githubusercontent.com/u/622227?s=64" alt="fred" width="48" height="48" /> </div> + + <div id="encoded-chars"> + <Image src="https://avatars.githubusercontent.com/u%2f622227?s=64" alt="fred2" width="48" height="48" /> + </div> </body> </html> |
