fix(compiler-sfc): preserve hash hrefs on <image> elements (#14756)

Author: danielroe

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

@@ -150,6 +150,29 @@ describe('compiler sfc: transform asset url', () => {
     expect(code).toContain(`import _imports_0 from './foo%.png'`)
   })
 
+  test('should not transform hash fragments on <image>', () => {
+    // `<image href="#...">` is an in-document fragment reference to another
+    // SVG element (like `<use>`), not a Node.js subpath import specifier.
+    const { code } = compileWithAssetUrls(
+      `<svg><image href="#" /><image href="#myClip" /></svg>`,
+      { includeAbsolute: true },
+    )
+    expect(code).toContain(`href: "#"`)
+    expect(code).toContain(`href: "#myClip"`)
+    expect(code).not.toContain(`from '#'`)
+    expect(code).not.toContain(`from '#myClip'`)
+  })
+
+  test('should not transform bare `#` value into an import', () => {
+    // A bare `#` is never a valid module specifier and should always be left
+    // untouched, even on tags that otherwise support subpath imports.
+    const { code } = compileWithAssetUrls(`<img src="#" />`, {
+      includeAbsolute: true,
+    })
+    expect(code).toContain(`src: "#"`)
+    expect(code).not.toContain(`from '#'`)
+  })
+
   test('should allow for full base URLs, with paths', () => {
     const { code } = compileWithAssetUrls(`<img src="./logo.png" />`, {
       base: 'http://localhost:3000/src/',

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

@@ -35,20 +35,22 @@ export interface AssetURLOptions {
   tags?: AssetURLTagConfig
 }
 
-// Built-in attrs that always represent resource URLs. `use` is intentionally
-// omitted because its hash-only values may still be fragment references.
+// Built-in attrs that always represent resource URLs. `use` and `image` are
+// intentionally omitted because their hash-only values are fragment references
+// to in-document elements (e.g. `<image href="#myClip" />`), not module
+// specifiers.
 const resourceUrlTagConfig: AssetURLTagConfig = {
   video: ['src', 'poster'],
   source: ['src'],
   img: ['src'],
-  image: ['xlink:href', 'href'],
 }
 
 export const defaultAssetUrlOptions: Required<AssetURLOptions> = {
   base: null,
   includeAbsolute: false,
   tags: {
     ...resourceUrlTagConfig,
+    image: ['xlink:href', 'href'],
     use: ['xlink:href', 'href'],
   },
 }
@@ -125,6 +127,8 @@ export const transformAssetUrl: NodeTransform = (
       if (
         isExternalUrl(urlValue) ||
         isDataUrl(urlValue) ||
+        // a bare `#` is never a valid import specifier
+        urlValue === '#' ||
         (isHashOnlyValue && !canTransformHashImport(node.tag, attr.name)) ||
         (!options.includeAbsolute && !isRelativeUrl(urlValue))
       ) {