diff --git a/packages/vite/client.d.ts b/packages/vite/client.d.ts
index 16e2b167dec544..102e69c4bb3a25 100644
--- a/packages/vite/client.d.ts
+++ b/packages/vite/client.d.ts
@@ -106,6 +106,10 @@ declare module '*.cur' {
   const src: string
   export default src
 }
+declare module '*.jxl' {
+  const src: string
+  export default src
+}
 
 // media
 declare module '*.mp4' {
diff --git a/packages/vite/src/node/constants.ts b/packages/vite/src/node/constants.ts
index 0f865742c4cc1a..519fc1add7ead5 100644
--- a/packages/vite/src/node/constants.ts
+++ b/packages/vite/src/node/constants.ts
@@ -133,6 +133,7 @@ export const KNOWN_ASSET_TYPES = [
   'webp',
   'avif',
   'cur',
+  'jxl',
 
   // media
   'mp4',
diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts
index d6f84ebc42966a..11093ad8bccb2c 100644
--- a/packages/vite/src/node/plugins/asset.ts
+++ b/packages/vite/src/node/plugins/asset.ts
@@ -57,6 +57,8 @@ export function registerCustomMime(): void {
   mrmime.mimes['flac'] = 'audio/flac'
   // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
   mrmime.mimes['eot'] = 'application/vnd.ms-fontobject'
+  // https://github.com/lukeed/mrmime/issues/10
+  mrmime.mimes['jxl'] = 'image/jxl'
 }
 
 export function renderAssetUrlInJS(