fix(images): Return the proper content-type for the chosen format (#6741)

.changeset/serious-ladybugs-eat.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix content-type header being wrong in dev on images from `astro:assets`

packages/astro/src/assets/image-endpoint.ts

@@ -1,4 +1,4 @@
-import mime from 'mime';
+import mime from 'mime/lite.js';
 import type { APIRoute } from '../@types/astro.js';
 import { isRemotePath } from '../core/path.js';
 import { getConfiguredImageService } from './internal.js';
@@ -54,7 +54,7 @@ export const get: APIRoute = async ({ request }) => {
 		return new Response(data, {
 			status: 200,
 			headers: {
-				'Content-Type': mime.getType(format) || '',
+				'Content-Type': mime.getType(format) ?? `image/${format}`,
 				'Cache-Control': 'public, max-age=31536000',
 				ETag: etag(data.toString()),
 				Date: new Date().toUTCString(),

packages/astro/src/assets/vite-plugin-assets.ts

@@ -1,6 +1,6 @@
 import { bold } from 'kleur/colors';
 import MagicString from 'magic-string';
-import mime from 'mime';
+import mime from 'mime/lite.js';
 import fs from 'node:fs/promises';
 import { Readable } from 'node:stream';
 import { fileURLToPath } from 'node:url';
@@ -133,10 +133,7 @@ export default function assets({
 							format = result.format;
 						}
 
-						res.setHeader(
-							'Content-Type',
-							mime.getType(fileURLToPath(filePathURL)) || `image/${format}`
-						);
+						res.setHeader('Content-Type', mime.getType(format) ?? `image/${format}`);
 						res.setHeader('Cache-Control', 'max-age=360000');
 
 						const stream = Readable.from(data);

packages/astro/test/core-image.test.js

@@ -97,6 +97,13 @@ describe('astro:image', () => {
 				expect(res.status).to.equal(200);
 			});
 
+			it('returns proper content-type', async () => {
+				let $img = $('#local img');
+				let src = $img.attr('src');
+				let res = await fixture.fetch(src);
+				expect(res.headers.get('content-type')).to.equal('image/webp');
+			});
+
 			it('errors on unsupported formats', async () => {
 				logs.length = 0;
 				let res = await fixture.fetch('/unsupported-format');