Skip to content
On this page

Working with assets

Overview

By default, Vite will detect and bundle assets so they can be versioned through the manifest file.

There are a few way to import assets, including referencing them in an src attribute or importing them via import. Both work with absolute, relative or aliased paths.

References in code

Assets referenced in templates are statically detected by Vite. For instance, an image stored in resources/images/logo.png can be imported like the following:

<img src="@/resources/images/logo.png" alt="My logo" />

Using url() in CSS files works the same way.

Manual imports

Alternatively, assets can be imported with an import statement:

import logo from '@/resources/images/logo.png'
document.getElementById('logo').src = logo

In this example, @/resources/images/logo.png will be resolved to http://localhost:3000/images/logo.png during development, and become /assets/logo.2d8efhg.png in the production build.

Import modifiers

Vite supports a few import modifiers, such as ?url or ?raw. You can learn more about this in their documentation.

Absolute URLs

When trying to reference assets stored in the public directory, you will need to tell Vite not to bundle them, otherwise the build will fail (see the relevant Vite issue).

One way of doing that is using a dynamic path or a variable. For instance, if you have an image stored in public/logo.png, you can reference it like the following:

<img :src="'/logo.png'" alt="My logo" />

Avoid absolute URLs

If you can, it's better to bundle assets so they can be versioned and cache-busted. They can also be optimized by Vite and Rollup plugins.

Working with assets has loaded