Importing Static Assets in Vite

I recently migrated a company project to vite + yarn. During testing, I found that some static asset imports no longer worked.

Error message:

Uncaught (in promise) ReferenceError: require is not defined

Original code:

<img
  :src="require('@/assets/images/tip.png')"
>

The original project was built with Vue CLI and used CJS-style imports.

Vite fully adopts the ESM standard,

so the require-based approach is not compatible.

Here are a few ways to resolve this:

<script setup>
import imgSrc from '@/assets/images/tip.png';
</script>

<img
  :src="imgSrc"
>

Place the asset in the public/images folder.

<img
  src="/images/tip.png"
>

Use native ESM functionality to construct the path.

<img
  :src="new URL('./tip.png', import.meta.url).href"
>

Let us break this down:

'./tip.png', // Location relative to this module
import.meta.url // Path to this module

The tip.png file should be placed at './tip.png' relative to the module containing this code.

This method cannot be used in SSR, since the server environment is Node.

References