fix(compiler-sfc): support asset paths containing spaces (#8752)

By decoding them before generating them as JavaScript import paths

fix vuejs/vitepress#2596
fix vuejs/vitepress#573

Author: Jeff-Tian

packages/compiler-sfc/__tests__/templateTransformAssetUrl.spec.ts

@@ -166,4 +166,34 @@ describe('compiler sfc: transform asset url', () => {
     expect(code).toMatch(`_createStaticVNode`)
     expect(code).toMatchSnapshot()
   })
+
+  test('transform with stringify with space in absolute filename', () => {
+    const { code } = compileWithAssetUrls(
+      `<div><img src="/foo bar.png"/></div>`,
+      {
+        includeAbsolute: true
+      },
+      {
+        hoistStatic: true,
+        transformHoist: stringifyStatic
+      }
+    )
+    expect(code).toMatch(`_createElementVNode`)
+    expect(code).toContain(`import _imports_0 from '/foo bar.png'`)
+  })
+
+  test('transform with stringify with space in relative filename', () => {
+    const { code } = compileWithAssetUrls(
+      `<div><img src="./foo bar.png"/></div>`,
+      {
+        includeAbsolute: true
+      },
+      {
+        hoistStatic: true,
+        transformHoist: stringifyStatic
+      }
+    )
+    expect(code).toMatch(`_createElementVNode`)
+    expect(code).toContain(`import _imports_0 from './foo bar.png'`)
+  })
 })

packages/compiler-sfc/src/template/transformAssetUrl.ts

@@ -168,7 +168,13 @@ function getImportsExpressionExp(
         loc,
         ConstantTypes.CAN_STRINGIFY
       )
-      context.imports.push({ exp, path })
+
+      // We need to ensure the path is not encoded (to %2F),
+      // so we decode it back in case it is encoded
+      context.imports.push({
+        exp,
+        path: decodeURIComponent(path)
+      })
     }
 
     if (!hash) {