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

[kitschpatrol]

Changes

• Closes Invalid MIME type in Picture component #11135
• Use existing mrmime dependency to ensure valid mapping between file name extensions and image MIME types

Testing

Added MIME type test to core-image.test.js alongside existing Picture component validation tests.

Docs

N/A, the Picture component should simply now work as expected.

[changeset-bot]

🦋 Changeset detected

Latest commit: f203342

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Princesseuh]

Instead of '', you can pass the src of the image. mrmime should be able to handle it

[kitschpatrol]

Ok! That was to appease TypeScript, since lookup's definition only accepts a string, but I've confirmed that mrmime correctly returns undefined if given undefined.

[kitschpatrol]

Oh I see pass the source, read too quickly.

[kitschpatrol]

Hmm passing image.src works in production builds, but in dev mrmime doesn't know what to make of the URL:

import * as mrmime from 'mrmime'

// Build
mrmime.lookup('http://localhost:4321/_astro/penguin1.wSAOfMN3_ZYmXno.jpg')
// image/jpeg


// Dev
mrmime.lookup('http://localhost:4321/_image?href=%2F%40fs%2FUsers%2Fmika%2FCode%2Fastro%2Fpackages%2Fastro%2Ftest%2Ffixtures%2Fcore-image%2Fsrc%2Fassets%2Fpenguin1.jpg%3ForigWidth%3D207%26origHeight%3D243%26origFormat%3Djpg&f=jpg') 
// undefined

I'm not sure how common an undefined image.options.format is? Presumably not very since it wasn't handled in the previous implementation?

[kitschpatrol]

Pushed a commit with this, just noting the above caveat. It doesn't materially change the undefined edge case.

[Princesseuh]

This is fine with me, I think that ultimately there's a potential better fix in the image service API itself, but that's for me to think about in the future - this is great!

[Princesseuh]

This looks great, thank you very much! As I said, we'll do a proper overhaul of this in the future, one day, maybe. But this works perfectly fine in the meantime!

[kitschpatrol]

Thanks!