diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts
index e765a911ce0766..2ff5b101529982 100644
--- a/packages/vite/src/node/plugins/asset.ts
+++ b/packages/vite/src/node/plugins/asset.ts
@@ -207,9 +207,7 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
       }
 
       return {
-        code: `export default ${JSON.stringify(
-          url.startsWith('data:') ? url : encodeURIPath(url),
-        )}`,
+        code: `export default ${JSON.stringify(encodeURIPath(url))}`,
         // Force rollup to keep this module from being shared between other entry points if it's an entrypoint.
         // If the resulting chunk is empty, it will be removed in generateBundle.
         moduleSideEffects:
diff --git a/packages/vite/src/node/utils.ts b/packages/vite/src/node/utils.ts
index 0352cd19e969e2..90fa8daa038b74 100644
--- a/packages/vite/src/node/utils.ts
+++ b/packages/vite/src/node/utils.ts
@@ -1421,6 +1421,7 @@ export function displayTime(time: number): string {
  * Encodes the URI path portion (ignores part after ? or #)
  */
 export function encodeURIPath(uri: string): string {
+  if (uri.startsWith('data:')) return uri
   const filePath = cleanUrl(uri)
   const postfix = filePath !== uri ? uri.slice(filePath.length) : ''
   return encodeURI(filePath) + postfix
@@ -1431,6 +1432,7 @@ export function encodeURIPath(uri: string): string {
  * that can handle un-encoded URIs, where `%` is the only ambiguous character.
  */
 export function partialEncodeURIPath(uri: string): string {
+  if (uri.startsWith('data:')) return uri
   const filePath = cleanUrl(uri)
   const postfix = filePath !== uri ? uri.slice(filePath.length) : ''
   return filePath.replaceAll('%', '%25') + postfix
diff --git a/playground/assets/__tests__/assets.spec.ts b/playground/assets/__tests__/assets.spec.ts
index 6fb337a9484bb6..8aeb61377844e8 100644
--- a/playground/assets/__tests__/assets.spec.ts
+++ b/playground/assets/__tests__/assets.spec.ts
@@ -282,6 +282,26 @@ describe('css url() references', () => {
 })
 
 describe('image', () => {
+  test('src', async () => {
+    const img = await page.$('.img-src')
+    const src = await img.getAttribute('src')
+    expect(src).toMatch(
+      isBuild
+        ? /\/foo\/bar\/assets\/html-only-asset-[-\w]{8}\.jpg/
+        : /\/foo\/bar\/nested\/html-only-asset.jpg/,
+    )
+  })
+
+  test('src inline', async () => {
+    const img = await page.$('.img-src-inline')
+    const src = await img.getAttribute('src')
+    expect(src).toMatch(
+      isBuild
+        ? /^data:image\/svg\+xml,%3csvg/
+        : /\/foo\/bar\/nested\/inlined.svg/,
+    )
+  })
+
   test('srcset', async () => {
     const img = await page.$('.img-src-set')
     const srcset = await img.getAttribute('srcset')
diff --git a/playground/assets/index.html b/playground/assets/index.html
index 80fbf14be8bc59..de742628953db1 100644
--- a/playground/assets/index.html
+++ b/playground/assets/index.html
@@ -175,7 +175,12 @@ <h2>Image Src Set</h2>
 
 <h2>HTML only asset</h2>
 <div>
-  <img src="./nested/html-only-asset.jpg" alt="" />
+  <img class="img-src" src="./nested/html-only-asset.jpg" alt="" />
+</div>
+
+<h2>HTML inline asset</h2>
+<div>
+  <img class="img-src-inline" src="./nested/inlined.svg" alt="" />
 </div>
 
 <h2>SVG Fragments</h2>
diff --git a/playground/assets/nested/inlined.svg b/playground/assets/nested/inlined.svg
new file mode 100644
index 00000000000000..e00a25209ebd4e
--- /dev/null
+++ b/playground/assets/nested/inlined.svg
@@ -0,0 +1,12 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M15.0378 6.34317L13.6269 7.76069L16.8972 11.0157L3.29211 11.0293L3.29413 13.0293L16.8619 13.0157L13.6467 16.2459L15.0643 17.6568L20.7079 11.9868L15.0378 6.34317Z"
+    fill="currentColor"
+  />
+</svg>