image icon indicating copy to clipboard operation
image copied to clipboard

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

Open lecoueyl opened this issue 7 months ago • 0 comments

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

lecoueyl avatar Jul 04 '24 00:07 lecoueyl