Url of static assets not found in development with Vite js

Question

Imports of png images fail to resolve locally (in development mode, running npm vite). They do resolve in the production build however. At first I imported them dynamically but they wouldn't resolve in the production build so I imported them beforehand.

//.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)

Philx94 · Accepted Answer · 2022-08-02 17:29:27Z

5

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

See 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

answered Aug 2, 2022 at 17:29

Philx94

1,3157 gold badges25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dogoku Over a year ago

For me, this works in build but not for dev

Philx94 Over a year ago

Works in both here. What's your error ?

Richard Barraclough Over a year ago

Not working for me. Looks like import ... from 'image.png' doesn't work in Vite.

Ivan Borshchov Over a year ago

😀😂Works for svg but not for png and not for jpg, vite 5.2.13

Collectives™ on Stack Overflow

Url of static assets not found in development with Vite js

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related