Dynamic image url import error in vite 6

[lmsccc]

Describe the bug

In vite 5, I am able to use dynamic import in the following way:

// path like "icon/react.png"
function getImageUrl(path) {
  return new URL(`./dir/${path}`, import.meta.url).href
}

However, in vite 6, it does not work. I have noticed that someone has the same question at #19156. I can solve it like this:

export function getImageUrl(imgPath: string) {
  const paths = imgPath.split('/');
  return new URL(`../assets/${paths[0]}/${paths[1]}`, import.meta.url).href;
}

But I believe this is not an ideal solution as it implies that the path level is limited. Is there any other way to address this problem?

Reproduction

https://stackblitz.com/edit/vitejs-vite-pqyje2us?file=src%2Fmain.js,package.json&terminal=dev

Steps to reproduce

No response

System Info

vite 6.0.7
node 18.20.2

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[hi-ogawa]

As explained in #19156 (comment), this is an intended change/fix.

The alternative suggested is to use import.meta.glob. Probably you can try something like this:
https://stackblitz.com/edit/vitejs-vite-uhgyadyd?file=src%2Fmain.js

const glob = import.meta.glob('/src/assets/**/*', {
  query: '?url',
  eager: true,
});
app.innerHTML = `<pre>${JSON.stringify(glob, null, 2)}</pre>`;