require is not defined

Environment

latest versions

Reproduction

<img :src="require('~/assets/image.png')"> anywhere in vue component.

Describe the bug

require is not defined when using it such as…

<img :src="require('~/assets/image.png')">

Additional context

No response

Logs

at $id_9513b4f8 (file://./.nuxt/dist/server/server.mjs:10135:22)
at __instantiateModule__ (file://./.nuxt/dist/server/server.mjs:10596:9)
at __ssrLoadModule__ (file://./.nuxt/dist/server/server.mjs:10543:25)
at ssrImport (file://./.nuxt/dist/server/server.mjs:10568:13)
at $id_45a9f067 (file://./.nuxt/dist/server/server.mjs:9928:37)
at __instantiateModule__ (file://./.nuxt/dist/server/server.mjs:10596:9)
at __ssrLoadModule__ (file://./.nuxt/dist/server/server.mjs:10543:25)
at ssrImport (file://./.nuxt/dist/server/server.mjs:10568:13)
at $id_7689e89d (file://./.nuxt/dist/server/server.mjs:1935:37)
at async __instantiateModule__ (file://./.nuxt/dist/server/server.mjs:10596:3)

[danielroe]

If you are using vite then require will not work; it’s webpack-only. Instead, just use:

<template>
  <div class="app">
    <img src="~/assets/image.png">
  </div>
</template>

[juancarlos-ctg]

if you’re using nuxt 3 just put the img src as "assets/<whatever path to your img>".

By default nuxt 3 will not use the @ for specifying the path in the Vue.js

So dynamically loading images using urls should work like so:

<img :src="assets/path/to/img.png">

UPDATE May 9th:

In production the above does not work, the images are still rendered as assets/path/to/img.png where a path with _nuxt/.../.../ should be used to access the assets.

To dynamically render images that are currently existing within your assets directory, you will need to import them in your script tag.

For example,

<script>
import icon from '@/assets/images/icon.png'
export default { 
  data () { 
    return { image: icon}
  }
}
</script>

<template>
  <img :src="image">
</template>
</template

Again, this is for Nuxt 3