fix: skip encode if is data uri (#16233)

Author: bluwy

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:

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

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')

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>