nuxt / nuxt/image

IPX images not found when setting nitro.static to true in development

Open
#1,397 3 comments 7 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

When using the default IPX provider and setting nitro.static to true in nuxt.config.ts, images will not be found in development.
However, images are correctly generated when running nuxt build and there are no issues in production.

Reproduction: https://stackblitz.com/edit/github-f66jbi?file=nuxt.config.ts

nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  srcDir: 'src',
  devtools: { enabled: false },

  app: {
    head: {
      title: 'Nuxt Image Example',
    },
  },

  modules: ['@nuxtjs/tailwindcss', '@nuxt/image'],
  compatibilityDate: '2024-07-03',

  nitro: {
    // BUG: when setting to true, ipx image path will not be found during dev
    static: true,
  },
});
Console error
[Vue Router warn]: No match found for location with path "/_ipx/f_jpeg&s_2048x1366/images/mountains_2.jpg"
Workaround

The current solution is to dynamically set nitro.static to false during development

nitro: {
  static: process.env.NODE_ENV !== 'development',
},
Expectation

Using nitro.static setting should not be causing issue during development

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

Start with the linked StackBlitz reproduction and its nuxt.config.ts, then run development mode with nitro.static set to true and inspect the failing /_ipx image path. Done means IPX images resolve in development with that setting, while the existing production behavior remains working.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.