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 #)
  */
 exportfunctionencodeURIPath(uri: string): string{
+if(uri.startsWith('data:'))returnuri
 constfilePath=cleanUrl(uri)
 constpostfix=filePath!==uri ? uri.slice(filePath.length) : ''
 returnencodeURI(filePath)+postfix
@@ -1431,6 +1432,7 @@ export function encodeURIPath(uri: string): string {
  * that can handle un-encoded URIs, where `%` is the only ambiguous character.
  */
 exportfunctionpartialEncodeURIPath(uri: string): string{
+if(uri.startsWith('data:'))returnuri
 constfilePath=cleanUrl(uri)
 constpostfix=filePath!==uri ? uri.slice(filePath.length) : ''
 returnfilePath.replaceAll('%','%25')+postfix

playground/assets/__tests__/assets.spec.ts

@@ -282,6 +282,26 @@ describe('css url() references', () => {
 })
 
 describe('image',()=>{
+test('src',async()=>{
+constimg=awaitpage.$('.img-src')
+constsrc=awaitimg.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()=>{
+constimg=awaitpage.$('.img-src-inline')
+constsrc=awaitimg.getAttribute('src')
+expect(src).toMatch(
+isBuild
+ ? /^data:image\/svg\+xml,%3csvg/
+ : /\/foo\/bar\/nested\/inlined.svg/,
+)
+})
+
 test('srcset',async()=>{
 constimg=awaitpage.$('.img-src-set')
 constsrcset=awaitimg.getAttribute('srcset')

playground/assets/index.html

@@ -175,7 +175,12 @@ <h2>Image Src Set</h2>
 
 <h2>HTML only asset</h2>
 <div>
-<imgsrc="./nested/html-only-asset.jpg" alt="" />
+<imgclass="img-src" src="./nested/html-only-asset.jpg" alt="" />
+</div>
+
+<h2>HTML inline asset</h2>
+<div>
+<imgclass="img-src-inline" src="./nested/inlined.svg" alt="" />
 </div>
 
 <h2>SVG Fragments</h2>