diff --git a/.changeset/serious-garlics-cheer.md b/.changeset/serious-garlics-cheer.md new file mode 100644 index 0000000000..225b8c2d63 --- /dev/null +++ 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 index 1b4f67e5d2..593dd80973 100644 --- 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 ( ); diff --git a/packages/astro/test/core-image.test.js b/packages/astro/test/core-image.test.js index 539688725b..17c08db21e 100644 --- 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 index ddb7108f16..901b91ee86 100644 --- 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'; ---
@@ -19,6 +20,11 @@ import myImage from "../assets/penguin1.jpg";
+
+ + +
+