Skip to content

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

Merged
edison1105 merged 2 commits into
vuejs:mainfrom
danielroe:fix/image-href
May 6, 2026
Merged

fix(compiler-sfc): preserve hash hrefs on <image> elements#14756
edison1105 merged 2 commits into
vuejs:mainfrom
danielroe:fix/image-href

Conversation

@danielroe

@danielroe danielroe commented Apr 23, 2026 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Member

resolves nuxt/nuxt#34858

this addresses a regression from #13045 which introduced handling for node import conditions in image hrefs.

it's common to have <image> elements in svgs with fragment references, just as it is to have <use> (referenced in the above PR)

Summary by CodeRabbit

  • Bug Fixes

    • Preserve fragment-only URLs (e.g., "#" or "#id") in image and SVG references so they aren't turned into module imports.

  • Tests

    • Added tests to verify fragment-only URLs remain unchanged during asset URL transformation.

@coderabbitai

coderabbitai Bot commented Apr 23, 2026 •
edited
Loading

Copy link
Copy Markdown

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 3fbb6fa9-e1ae-4ff9-ae61-0325ea57271d

📥 Commits

Reviewing files that changed from the base of the PR and between 8a37ad9 and 67b25b4.

📒 Files selected for processing (1)
  • packages/compiler-sfc/__tests__/templateTransformAssetUrl.spec.ts
📝 Walkthrough

Walkthrough

Skips asset URL transformation for attributes whose value is exactly '#' and moves the image tag mapping from resourceUrlTagConfig into defaultAssetUrlOptions.tags. Adds tests ensuring fragment-only values ('#', '#myClip') are not turned into import specifiers for <image href> and <img src>.

Changes

Cohort / File(s) Summary
Asset URL Transform Logic
packages/compiler-sfc/src/template/transformAssetUrl.ts		 Add explicit skip when attribute value === '#'. Remove image from resourceUrlTagConfig and add image: ['xlink:href','href'] to defaultAssetUrlOptions.tags.
Transform Asset URL Tests
packages/compiler-sfc/__tests__/templateTransformAssetUrl.spec.ts		 Add tests asserting no import statements are generated for fragment-only values ('#', '#myClip') on <image href> and <img src>.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

Suggested labels

ready to merge, scope: sfc, :hammer: p3-minor-bug

Suggested reviewers

  • edison1105

Poem

🐰 A tiny hash hopped into view,
"I point to a clip — no import, that's true!"
The transformer looked twice, then let it be,
Now SVG fragments roam safe and free. 🎋

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main fix: preventing hash-only hrefs on image elements from being incorrectly treated as import specifiers.
Linked Issues check ✅ Passed The changes successfully address the linked issue by preventing fragment identifiers in SVG image hrefs from being misinterpreted as Node.js import specifiers during production builds.
Out of Scope Changes check ✅ Passed All changes are directly scoped to fixing the regression in asset URL transformation for SVG image elements with fragment identifiers; no out-of-scope modifications detected.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@pkg-pr-new

pkg-pr-new Bot commented Apr 23, 2026 •
edited
Loading

Copy link
Copy Markdown

Open in StackBlitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@14756

npm i https://pkg.pr.new/@vue/compiler-core@14756

yarn add https://pkg.pr.new/@vue/compiler-core@14756.tgz

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@14756

npm i https://pkg.pr.new/@vue/compiler-dom@14756

yarn add https://pkg.pr.new/@vue/compiler-dom@14756.tgz

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@14756

npm i https://pkg.pr.new/@vue/compiler-sfc@14756

yarn add https://pkg.pr.new/@vue/compiler-sfc@14756.tgz

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@14756

npm i https://pkg.pr.new/@vue/compiler-ssr@14756

yarn add https://pkg.pr.new/@vue/compiler-ssr@14756.tgz

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@14756

npm i https://pkg.pr.new/@vue/reactivity@14756

yarn add https://pkg.pr.new/@vue/reactivity@14756.tgz

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@14756

npm i https://pkg.pr.new/@vue/runtime-core@14756

yarn add https://pkg.pr.new/@vue/runtime-core@14756.tgz

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@14756

npm i https://pkg.pr.new/@vue/runtime-dom@14756

yarn add https://pkg.pr.new/@vue/runtime-dom@14756.tgz

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@14756

npm i https://pkg.pr.new/@vue/server-renderer@14756

yarn add https://pkg.pr.new/@vue/server-renderer@14756.tgz

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@14756

npm i https://pkg.pr.new/@vue/shared@14756

yarn add https://pkg.pr.new/@vue/shared@14756.tgz

vue

pnpm add https://pkg.pr.new/vue@14756

npm i https://pkg.pr.new/vue@14756

yarn add https://pkg.pr.new/vue@14756.tgz

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@14756

npm i https://pkg.pr.new/@vue/compat@14756

yarn add https://pkg.pr.new/@vue/compat@14756.tgz

commit: 67b25b4

@github-actions

github-actions Bot commented Apr 23, 2026

Copy link
Copy Markdown

Size Report

Bundles

File Size Gzip Brotli
runtime-dom.global.prod.js 106 kB 40 kB 35.9 kB
vue.global.prod.js 164 kB 60 kB 53.3 kB

Usages

Name Size Gzip Brotli
createApp (CAPI only) 48.6 kB 18.9 kB 17.3 kB
createApp 56.7 kB 21.9 kB 20.1 kB
createSSRApp 61 kB 23.7 kB 21.6 kB
defineCustomElement 62.9 kB 23.9 kB 21.8 kB
overall 71.5 kB 27.3 kB 24.9 kB

@danielroe danielroe mentioned this pull request Apr 23, 2026
Closed
@edison1105 edison1105 added scope: sfc 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. ready to merge The PR is ready to be merged. labels Apr 24, 2026
@edison1105

edison1105 commented May 6, 2026

Copy link
Copy Markdown
Member

/ecosystem-ci run

@vue-bot

vue-bot commented May 6, 2026

Copy link
Copy Markdown
Contributor

📝 Ran ecosystem CI: Open

suite result latest scheduled
test-utils ✅ success ✅ success
primevue ✅ success ✅ success
router ✅ success ✅ success
quasar ✅ success ✅ success
vue-i18n ✅ success ✅ success
vue-macros ✅ success ✅ success
vant ✅ success ✅ success
vueuse ✅ success ✅ success
vue-simple-compiler ✅ success ✅ success
vite-plugin-vue ✅ success ✅ success
vitepress ✅ success ✅ success
pinia ✅ success ✅ success
language-tools ✅ success ✅ success
vuetify ✅ success ✅ success
nuxt ✅ success ❌ failure
radix-vue ✅ success ✅ success

@edison1105 edison1105 merged commit 090b2e3 into vuejs:main May 6, 2026
14 checks passed
@claude claude Bot mentioned this pull request May 18, 2026
Merged
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. ready to merge The PR is ready to be merged. scope: sfc

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Build error: [commonjs--resolver] Missing "#" specifier when using href="#" in SVG tags

3 participants

@danielroe @edison1105 @vue-bot