use shorthash for data url image to prevent ENAMETOOLONG (#12108)

lameuler · ematipico · web-flow · commit 918953bd09f0 · 2024-10-03T10:54:01.000+01:00
* 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 &lt;my.burning@gmail.com&gt;
diff --git a/.changeset/dull-worms-own.md b/.changeset/dull-worms-own.md
@@ -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.
diff --git a/packages/astro/src/assets/utils/transformToPath.ts b/packages/astro/src/assets/utils/transformToPath.ts
@@ -8,7 +8,11 @@ import { isESMImportedImage } from './imageKind.js';
 export function propsToFilename(filePath: string, transform: ImageTransform, hash: string) {
 	let filename = decodeURIComponent(removeQueryString(filePath));
 	const ext = extname(filename);
-	filename = basename(filename, ext);
+	if (filePath.startsWith('data:')) {
+		filename = shorthash(filePath);
+	} else {
+		filename = basename(filename, ext);
+	}
 	const prefixDirname = isESMImportedImage(transform.src) ? dirname(filePath) : '';
 
 	let outputExt = transform.format ? `.${transform.format}` : ext;
diff --git a/packages/astro/test/core-image.test.js b/packages/astro/test/core-image.test.js
@@ -1263,4 +1263,57 @@ describe('astro:image', () => {
 			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');
+		});
+	});
 });
diff --git a/packages/astro/test/fixtures/core-image-data-url/package.json b/packages/astro/test/fixtures/core-image-data-url/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@test/core-image-data-url",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*"
+  }
+}  
diff --git a/packages/astro/test/fixtures/core-image-data-url/src/pages/index.astro b/packages/astro/test/fixtures/core-image-data-url/src/pages/index.astro
@@ -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>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
