Nuxt•7mo 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 with @nuxt/image 1.7.0 and I want to use the base directory assets/images. Therefore I have my nuxt config as follows:

// 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>

This works flawlessly in local development, but when I run 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: 1. running pnpm run generate to create a static version of the website. But that's not what I want. 2. using a normal <img> tag with a source like this: <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?

Tobija Fischer

StackBlitz

NuxtImg issue with /assets directory - StackBlitz

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

5 Replies

manniL•7mo ago

That won’t work as images must be publicly accessible. Images in assets will have a changing URL due to the hash

TobijaOP•7mo ago

okay, so you're telling me, I should just not bother with the /assets directory and put all images in the /public directory when working with the nuxt-image module? Because with the normal <img> tag it works and the image file is added to the bundle (with a hash in the file name) and referenced with the correct file name. (That was the behaviour I was initially expecting from NuxtImg as well)

manniL•7mo ago

yes

TobijaOP•7mo ago

Okay, thank you. Your help is greatly appreciated. Still I have to admit, if anything I'm getting more confused. I adjusted the reproduction (https://stackblitz.com/edit/nuxt-starter-6xjdby?file=app.vue) to use the public directory and a nuxt-image preset. It works in dev, and when I build in stackblitz, there's an error concerning sharp (maybe related to https://github.com/nuxt/image/issues/1210) and when I build it on my local machine, the presets just get fully ignored and the original image is displayed. Either I fundamentally don't understand how & when nuxt-image is meant to be used or there are some unintentional behaviours I'm stumbling upon. Either way I think for now, the most sensible thing for me to do is to use the normal <img> component because the project isn't really depending on a lot of nuxt-image funcitonality.

Wardan•2mo ago

did you ever find a solution for using the /assets dir? I notice that using img tag in a page will work but once I move it to a component img + assets dir breaks

Gaming

Programming

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

Did you find this page helpful?