mirror of
https://github.com/withastro/astro.git
synced 2024-12-16 21:46:22 -05:00
use shorthash for data url image to prevent ENAMETOOLONG (#12108)
* use shorthash for filename of data url images * add changeset * add fixture to test processing of data url images * run format * update changeset * fix test * Update .changeset/dull-worms-own.md --------- Co-authored-by: Emanuele Stoppa <my.burning@gmail.com>
This commit is contained in:
parent
fdba5f344f
commit
918953bd09
6 changed files with 94 additions and 1 deletions
5
.changeset/dull-worms-own.md
Normal file
5
.changeset/dull-worms-own.md
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
'astro': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Fixes a bug where [data URL images](https://developer.mozilla.org/en-US/docs/Web/URI/Schemes/data) were not correctly handled. The bug resulted in an `ENAMETOOLONG` error.
|
|
@ -8,7 +8,11 @@ import { isESMImportedImage } from './imageKind.js';
|
||||||
export function propsToFilename(filePath: string, transform: ImageTransform, hash: string) {
|
export function propsToFilename(filePath: string, transform: ImageTransform, hash: string) {
|
||||||
let filename = decodeURIComponent(removeQueryString(filePath));
|
let filename = decodeURIComponent(removeQueryString(filePath));
|
||||||
const ext = extname(filename);
|
const ext = extname(filename);
|
||||||
|
if (filePath.startsWith('data:')) {
|
||||||
|
filename = shorthash(filePath);
|
||||||
|
} else {
|
||||||
filename = basename(filename, ext);
|
filename = basename(filename, ext);
|
||||||
|
}
|
||||||
const prefixDirname = isESMImportedImage(transform.src) ? dirname(filePath) : '';
|
const prefixDirname = isESMImportedImage(transform.src) ? dirname(filePath) : '';
|
||||||
|
|
||||||
let outputExt = transform.format ? `.${transform.format}` : ext;
|
let outputExt = transform.format ? `.${transform.format}` : ext;
|
||||||
|
|
|
@ -1263,4 +1263,57 @@ describe('astro:image', () => {
|
||||||
assert.equal(imgData instanceof Buffer, true);
|
assert.equal(imgData instanceof Buffer, true);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('build data url', () => {
|
||||||
|
before(async () => {
|
||||||
|
fixture = await loadFixture({
|
||||||
|
root: './fixtures/core-image-data-url/',
|
||||||
|
image: {
|
||||||
|
remotePatterns: [
|
||||||
|
{
|
||||||
|
protocol: 'data',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
await fixture.build();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('uses short hash for data url filename', async () => {
|
||||||
|
const html = await fixture.readFile('/index.html');
|
||||||
|
const $ = cheerio.load(html);
|
||||||
|
const src1 = $('#data-url img').attr('src');
|
||||||
|
assert.equal(basename(src1).length < 32, true);
|
||||||
|
const src2 = $('#data-url-no-size img').attr('src');
|
||||||
|
assert.equal(basename(src2).length < 32, true);
|
||||||
|
assert.equal(src1.split('_')[0], src2.split('_')[0]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('adds file extension for data url images', async () => {
|
||||||
|
const html = await fixture.readFile('/index.html');
|
||||||
|
const $ = cheerio.load(html);
|
||||||
|
const src = $('#data-url img').attr('src');
|
||||||
|
assert.equal(src.endsWith('.webp'), true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('writes data url images to dist', async () => {
|
||||||
|
const html = await fixture.readFile('/index.html');
|
||||||
|
const $ = cheerio.load(html);
|
||||||
|
const src = $('#data-url img').attr('src');
|
||||||
|
assert.equal(src.length > 0, true);
|
||||||
|
const data = await fixture.readFile(src, null);
|
||||||
|
assert.equal(data instanceof Buffer, true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('infers size of data url images', async () => {
|
||||||
|
const html = await fixture.readFile('/index.html');
|
||||||
|
const $ = cheerio.load(html);
|
||||||
|
const img = $('#data-url-no-size img');
|
||||||
|
const width = img.attr('width');
|
||||||
|
const height = img.attr('height');
|
||||||
|
assert.equal(width, '256');
|
||||||
|
assert.equal(height, '144');
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
8
packages/astro/test/fixtures/core-image-data-url/package.json
vendored
Normal file
8
packages/astro/test/fixtures/core-image-data-url/package.json
vendored
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"name": "@test/core-image-data-url",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"astro": "workspace:*"
|
||||||
|
}
|
||||||
|
}
|
17
packages/astro/test/fixtures/core-image-data-url/src/pages/index.astro
vendored
Normal file
17
packages/astro/test/fixtures/core-image-data-url/src/pages/index.astro
vendored
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
---
|
||||||
|
import { Image } from 'astro:assets';
|
||||||
|
const data = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAACQCAQAAABNan0aAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQflBAsNKgIhYT8HAAAAXklEQVR42u3BMQEAAADCoPVPbQlPoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4G8gnwABm4i4EAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMS0wNC0xMVQxMzo0MjowMiswMDowMNhkaiwAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjEtMDQtMTFUMTM6NDI6MDIrMDA6MDCpOdKQAAAAAElFTkSuQmCC"
|
||||||
|
---
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="data-url">
|
||||||
|
<Image src={data} alt="transparent" width="128" height="72" />
|
||||||
|
</div>
|
||||||
|
<div id="data-url-no-size">
|
||||||
|
<Image src={data} inferSize={true} alt="transparent" />
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -2813,6 +2813,12 @@ importers:
|
||||||
specifier: workspace:*
|
specifier: workspace:*
|
||||||
version: link:../../..
|
version: link:../../..
|
||||||
|
|
||||||
|
packages/astro/test/fixtures/core-image-data-url:
|
||||||
|
dependencies:
|
||||||
|
astro:
|
||||||
|
specifier: workspace:*
|
||||||
|
version: link:../../..
|
||||||
|
|
||||||
packages/astro/test/fixtures/core-image-deletion:
|
packages/astro/test/fixtures/core-image-deletion:
|
||||||
dependencies:
|
dependencies:
|
||||||
'@astrojs/markdoc':
|
'@astrojs/markdoc':
|
||||||
|
|
Loading…
Reference in a new issue