Different results using URL

[vicentexte]

Hi everyone,

i'm working with vue + phaser and i have this code in my project:

methods: {
        src(file) {
            path='../assets/'+file
            return new URL(path, import.meta.url).href;
        },
        preload() {
            this.load.image('sky', this.src('background.png'));
        },

it's not working

methods: {
        src() {
            return new URL('../assets/background.png', import.meta.url).href;
        },
        preload() {
            this.load.image('sky', this.src());
        },

it's work.

i have checked with console.log. The return of the first case is "file:///home/vicente/appandtec/solemne2/parabolic-game/src/assets/background.png" and "http://localhost:8080/img/background.921e58e9.png" for the other case.

What is happen?

[skirtles-code]

I'm not familiar with Phaser, but I suspect this problem originates in Vite.

When you're using new URL() to load assets in Vite it's important to ensure that the first parameter contains enough static information for Vite to be able to analyse it. If you need a dynamic value then you should use backticks, though the requirement for there to be a static portion to the URL remains. The static portion allows Vite to figure out which files are potential matches, so it can process them appropriately.

So this should work:

return new URL(`../assets/${file}`, import.meta.url).href;

In this example, the 'static' part is the ../assets/ at the beginning. That tells Vite that it can only match files in the assets directory, so it'll process all files in that directory as potential matches, just in case. It also rewrites the new URL() part accordingly.

When you write return new URL(path, import.meta.url).href, Vite can't tell what files might match path, so it gives up and leaves the new URL() unchanged, which isn't what you'd want.

For reference, the docs this are at:

• https://vite.dev/guide/assets.html#new-url-url-import-meta-url