Different results using URL #13327

vicentexte · 2025-05-15T03:02:19Z

vicentexte
May 15, 2025

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 · 2025-05-15T15:08:15Z

skirtles-code
May 15, 2025

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

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vue

Different results using URL #13327

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

Select a reply

Vue

Different results using URL #13327

vicentexte May 15, 2025

Replies: 1 comment

skirtles-code May 15, 2025

vicentexte
May 15, 2025

skirtles-code
May 15, 2025