nuxt / nuxt/image

'assets' dir only run in index or with $img

Open
#429 1 comment 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1.5k
Forks
331
Avg merge
19h 52m
Merged PRs (30d)
9

Description

Hello everyone,

I actually work on Nuxt static site with nuxt-image.
To optimize the loading of pages I am in the process of switching all our images to nuxt-image.
However, I have a big problem. I can't figure out if it was me who set up nuxt-image incorrectly or if this is really a bug.

configuration

// package.json
"@nuxt/image": "^0.4.8"
"nuxt": "^2.14.7"
// nuxt.config.js
export default {
  target: 'static',
  buildModules: [
    '@nuxt/image'
  ]
  image: {
    dir: 'assets'
  }
}

problem description

In my page index.vue then I make a <nuxt-picture> all run right (in dev en generated mode) :

<nuxt-picture
  loading="lazy"
  src="images/clients/my-image.png"
  alt="my alt"
  sizes="xs:80 xl:120"
  preset="logoClient"
  width="120"
  height="75"
  />

But then I try to switch simple <img> to a <nuxt-picture> in other .vue file (like component.vue) with same tag that's run on dev mode but not after generation. No error will be desplayed in generation but then I watch the page the srcet attritute point to images/clients/my-image.png and not /_nuxt/image/[hash].webp. I try to change the src to ~/assets/images/clients/my-image.png but that's not run in dev mode and the generation do not use passed parameters (sizes, preset, format, ...).

Thanks in advance for reading me. Hoping to be able to solve this problem soon.

EDIT : I upgrade for 0.6.0 but the issue is the same.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Compare nuxt-picture usage in index.vue and component.vue, starting with the image settings in nuxt.config.js. Run a static generation build and inspect the generated page: component.vue should use the optimized image path and preserve parameters such as sizes, preset, and format.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, nuxt
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.