nuxt: require is not defined

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>

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

@pixelpaulaus You can set vite: false in your nuxt.config.

Yeah found it https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url - Vite docs

imgUrl () {
    return new URL(`../assets/${this.icon}.svg`, import.meta.url).href
  }

Thanks @juancarlos-ctg. This solution works with Nuxt3. But how to import the image dynamically ? My component has a String prop with the asset name and I would like to import the image depending on this prop.

For dynamic images use this, it works in nuxt 3. Define the path as I did.

<template>
  <div class="app">
    <img :src="`/_nuxt/assets/images/${img.src}`" alt="image"/>
  </div>
</template>

export default {
  data() {
    return {
      img: { 
        src: 'img.png' 
      }
    }
  }
}

Note: define your directory properly, my image are saved in images folder.

It work for me 😃

Even with import * as MY_VAR from 'package'?

We now know that require does not work with vite, but which could be the solution to import the image dynamically with ssr?

For example, I was importing the image using “require” and combining it with a string prop, but can’t see a way of doing something similar with vite ssr, as import.meta.url is not working.

An example of changing images dynamically while using Vite:

<img :src="`/assets/${dynamic_image_name}.jpeg`"/>

Update: It only worked on dev mode.

Alguna solución a este problema, para ssr ?

Check out https://vitejs.dev/guide/features.html#glob-import and follow https://github.com/nuxt/nuxt.js/issues/14766.

@slavco86 @manniL your discussion and solution is not related to this problem. The problem is/was to import/require a dynamic image path and not a package.

To the problem with loading dynamic images: I found a solution in stack-overflow: https://stackoverflow.com/a/71514878/7866722

My solution turned out like that

const imageUrl = new URL(`../../assets/images/${props.src}`, import.meta.url).href;

Although I am getting the following error now:

Not allowed to load local resource file:///Users/<user>/projects/<project>/assets/images/logo.png

<!-- components/content/ArticleImage.vue -->
<template>
  <img :src="imgSrc()" :alt="alt" class="article-image" />
</template>

<script setup lang="ts">
const props = defineProps<{
  src: string;
  alt: string;
}>();

function imgSrc() {
  try {
    const imageUrl = new URL(`../../assets/images/${props.src}`, import.meta.url).href;

    return imageUrl;    
  } catch (error) {
    console.error(error);
  }
}
</script>

Bingo! Thanks!!!

I kind of found a work-around by replacing <img> with a <div> and setting the background-image with a Tailwind class. Changed from:

const logoFilename = 'logo-1.svg';
<img :src="`~/assets/img/logos/${logoFilename}`" ... />

to:

const logoTailwindBgImage = 'bg-[url(~/assets/img/logos/logo-1.svg)]'
<div class="w-full ..." :class="logoTailwindBgImage" ...></div>

This works in production too, but only when passing the whole Tailwind class as a single string.

Concatenating the class name only works with yarn dev:

const concatenatedTailwindClass = `bg-[url(~/assets/img/logos/${logoFilename})]`
<div class="w-full ..." :class="concatenatedTailwindClass" ...></div>

yarn build exits with an error:

ERROR [vite:css] ENOENT: no such file or directory, open ‘path/to/project/root/assets/img/logos/${logoFilename}’ file: /path/to/project/root/assets/css/tailwind.css

ERROR ENOENT: no such file or directory, open ‘/path/to/project/root/assets/img/logos/${logoFilename}’

error Command failed with exit code 1.

It’s no one-to-one replacement, but at least the images are rendered in production and are available at e.g. http://www.example.io/_nuxt/logo-1.ccb82e2f.svg.

Might be helpful to someone

https://github.com/nuxt/framework/discussions/7391

Can you not import instead of require? (I would request that you move this to a discussion rather than a long-closed and unrelated issue.)

Yeah found it https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url - Vite docs

imgUrl () {
    return new URL(`../assets/${this.icon}.svg`, import.meta.url).href
  }

not work in ssr