Nuxt•2y ago

NuxtImage can't use images from /assets/ directory (when building)

I know this is somewhat of a common problem I've seen around quite often, but somehow I'm still very much confused about this. So I hope somebody can explain to me what's happening here.

My situation:
I'm using

Nuxt 3.11.2

Nuxt 3.11.2

Nuxt 3.11.2

Nuxt 3.11.2 with

@nuxt/image 1.7.0

@nuxt/image 1.7.0

@nuxt/image 1.7.0

@nuxt/image 1.7.0 and I want to use the base directory

assets/images

assets/images

assets/images

assets/images.
Therefore I have my nuxt config as follows:

// nuxt.config.ts
image: {
  dir: "assets/images",
}

// nuxt.config.ts
image: {
  dir: "assets/images",
}

// nuxt.config.ts
image: {
  dir: "assets/images",
}

// nuxt.config.ts
image: {
  dir: "assets/images",
}

...and I use the component as follows:

<template>
  <NuxtImg src="/my-img.png" />
</template>

<template>
  <NuxtImg src="/my-img.png" />
</template>

<template>
  <NuxtImg src="/my-img.png" />
</template>

<template>
  <NuxtImg src="/my-img.png" />
</template>

This works flawlessly in local development, but when I run

pnpm run build

pnpm run build

, the images in my assets directory simply get ignored and the images are missing on the site. No matter what I tried, I couldn't get it to work.

Two things that do seem to work:

running
```
pnpm run generate
```
pnpm run generate
```
pnpm run generate
```
pnpm run generate
to create a static version of the website. But that's not what I want.
using a normal <img> tag with a source like this:
```
<img src="~/assets/images/my-img.png">
```
<img src="~/assets/images/my-img.png">
```
<img src="~/assets/images/my-img.png">
```
<img src="~/assets/images/my-img.png">

Here's a minimal reproduction for good measures:
https://stackblitz.com/edit/nuxt-starter-6xjdby?file=app.vue

My questions:

Is this expected behavior?
Am I doing something wrong?
Are there workarounds?

StackBlitzTobija Fischer

NuxtImg issue with /assets directory - StackBlitz

Create a new Nuxt project, module, layer or start from a theme with our collection of starters.

NuxtImage can't use images from /assets/ directory (when building)

Similar Threads

Similar Threads

Similar Threads