The URL of the static resource cannot be found in the Vite js development environment

Question

Imported png images cannot be parsed locally (in development mode, run npm vite). However, they did fix it in the production version. At first, I imported them dynamically, but they didn't resolve in the production version, so I imported them ahead of time.

//.ts file
import test from "../assets/sprites/test.png"

//vite.config.ts
export default defineConfig({
    plugins: [vue()],
    build: {
        target: 'esnext'
    }
})

test.png:1 GET http://localhost:3000/frontend/src/assets/frontend/src/assets/sprites/test.png 404 (Not Found)

Answer 1

To resolve this issue, use new URL(url, import.meta.url) to resolve static resources in prod and dev

See the Vite documentation on static asset handling: https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url

const test = new URL('../assets/sprites/test.png', import.meta.url).href