fix(assets): ensure valid mime types in picture component (#11147)

* test: Add test for Picture MIME types * fix(assets): Fix MIME type generation in Picture component * chore: changeset * fix: Trust mrmime to handle an undefined lookup argument * fix: Use image.src as fallback argument to mrmime --------- Co-authored-by: Erika <[email protected]>
withastro · May 27, 2024 · 2d93902 · 2d93902
1 parent cdf89a1
commit 2d93902
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 1 deletion.
diff --git a/.changeset/serious-garlics-cheer.md b/.changeset/serious-garlics-cheer.md
@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Fixes invalid MIME types in Picture source elements for jpg and svg extensions, which was preventing otherwise valid source variations from being shown by the browser
diff --git a/packages/astro/components/Picture.astro b/packages/astro/components/Picture.astro
@@ -1,5 +1,6 @@
 ---
 import { type LocalImageProps, type RemoteImageProps, getImage } from 'astro:assets';
+import * as mime from 'mrmime';
 import type { GetImageResult, ImageOutputFormat } from '../dist/@types/astro';
 import { isESMImportedImage, resolveSrc } from '../dist/assets/utils/imageKind';
 import { AstroError, AstroErrorData } from '../dist/core/errors/index.js';
@@ -99,7 +100,7 @@ if (import.meta.env.DEV) {
 			return (
 				<source
 					srcset={srcsetAttribute}
-					type={'image/' + image.options.format}
+					type={mime.lookup(image.options.format ?? image.src) ?? `image/${image.options.format}`}
 					{...sourceAdditionalAttributes}
 				/>
 			);

diff --git a/packages/astro/test/core-image.test.js b/packages/astro/test/core-image.test.js
@@ -244,6 +244,26 @@ describe('astro:image', () => {
 					srcset2.map((src) => src.w),
 					[207]
 				);
+
+				// MIME Types
+				const validMimeTypes = [
+					'image/webp',
+					'image/jpeg',
+					'image/avif',
+					'image/png',
+					'image/gif',
+					'image/svg+xml',
+				];
+
+				const $sources = $('#picture-mime-types picture source');
+				for ($source of $sources) {
+					const type = $source.attribs.type;
+					assert.equal(
+						validMimeTypes.includes(type),
+						true,
+						`Expected type attribute value to be a valid MIME type: ${type}`
+					);
+				}
 			});
 
 			it('Picture component scope styles work', async () => {

diff --git a/packages/astro/test/fixtures/core-image/src/pages/picturecomponent.astro b/packages/astro/test/fixtures/core-image/src/pages/picturecomponent.astro
@@ -1,6 +1,7 @@
 ---
 import { Picture } from "astro:assets";
 import myImage from "../assets/penguin1.jpg";
+import myImageSvg from '../assets/penguin.svg';
 ---
 
 <div id="picture-density-2-format">
@@ -19,6 +20,11 @@ import myImage from "../assets/penguin1.jpg";
   <Picture src={myImage} fallbackFormat="jpeg" alt="A penguin" class="img-comp" pictureAttributes={{ class: 'picture-comp' }} />
 </div>
 
+<div id="picture-mime-types">
+  <Picture alt="A penguin" src={myImage} formats={['jpg', 'jpeg', 'png', 'avif', 'webp']} />
+  <Picture alt="A penguin" src={myImageSvg} />
+</div>
+
 <style>
   .img-comp {
     border: 5px solid blue;