0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-03-10 23:01:26 -05:00

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>
This commit is contained in:
Matthew Phillips 2023-12-28 15:08:04 -05:00 committed by GitHub
parent b34bd2b2d9
commit 7f212f0831
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 20 additions and 2 deletions

View file

@ -0,0 +1,5 @@
---
"astro": patch
---
Fixes remote images with encoded characters

View file

@ -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}`;

View file

@ -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();

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

View file

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