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

By decoding them before generating them as JavaScript import paths fix vuejs/vitepress#2596 fix vuejs/vitepress#573
lumozx · Oct 21, 2023 · b7fb0ce · b7fb0ce
1 parent 4c6b7a4
commit b7fb0ce
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 1 deletion.
diff --git a/packages/compiler-sfc/__tests__/templateTransformAssetUrl.spec.ts b/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'`)
+  })
 })
diff --git a/packages/compiler-sfc/src/template/transformAssetUrl.ts b/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) {