Allow `~/path` as `<img src="~/...">` with `~` alias

[OrbisK]

Vue version

3.5.16

Link to minimal reproduction

https://github.com/OrbisK/vue-img-src-tilde

Steps to reproduce

1. pnpm i
2. pnpm dev
3. Error. The first '~' is always stripped.

What is expected?

The first ~ should not be stripped.

What is actually happening?

core/packages/compiler-sfc/src/template/templateUtils.ts

Lines 22 to 29 in cdffaf6

	export function parseUrl(url: string): UrlWithStringQuery {
	const firstChar = url.charAt(0)
	if (firstChar === '~') {
	const secondChar = url.charAt(1)
	url = url.slice(secondChar === '/' ? 2 : 1)
	}
	return parseUriParts(url)
	}

This does always remove the first ~

System Info

System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
    Memory: 36.29 GB / 62.58 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 23.5.0 - ~/.nvm/current/bin/node
    npm: 10.9.2 - ~/.nvm/current/bin/npm
    pnpm: 8.15.9 - ~/.nvm/current/bin/pnpm
    bun: 1.1.42 - ~/.nvm/current/bin/bun
  Browsers:
    Chrome: 130.0.6723.69
  npmPackages:
    vue: ^3.5.13 => 3.5.16

Any additional comments?

Nuxt uses ~ as alias for the /app directory.

Ref: vitejs/vite-plugin-vue#15
Ref: nuxt/nuxt#32119 (comment)

/cc @danielroe

[edison1105]

This would be a breaking change.

Currently

<img src="~/fixtures/logo.png"/>

is compiled to

import _imports_0 from 'fixtures/logo.png'

[danielroe]

would it be possible to distinguish ~/assets/test.png and ~assets/test.png (the latter is the example in the docs, which makes more sense for accessing a module)?

or, alternatively, make this behaviour configurable?

[edison1105]

I agree with making this behavior configurable and made a PR #13462.
Any suggestions are welcome.