1

i am trying to use nuxt-image on NUXT3, but it seems it doesn't work with the generate command. Images work during dev, but get a 404 when using nuxt generate.

in my nuxt config i have

modules: ["@nuxt/image-edge"],  
image: {
    dir: "assets/images",
  },

then in my files i have

<NuxtImg
      format="webp"
      class="mobile"
      src="/website/home/above-fold-illustration-mobile.png"
      alt="illustration"
      aria-hidden="true"
    />

So i am wondering if anyone else had a problem or if this is just a compatibility issue with nuxt-image and nuxt3 generate

Jean-Pierre Engelbrecht
  • 198
  • 2
  • 10

3 Answers3

1

this is not yet supported, waiting on https://github.com/nuxt/image/pull/614

Jean-Pierre Engelbrecht
  • 198
  • 2
  • 10
0

Reading this part of the documentation

For static provider, if images weren't crawled during generation (unreachable modals, pages or dynamic runtime size), changing dir from static causes 404 errors.

There are other few bugs if you change dir to something else than static apparently.
Can't you stick to static? Will probably avoid you quite some issues IMO.

kissu
  • 40,416
  • 14
  • 65
  • 133
  • so `static` is the default option. and even if i dont use dir and move my images to public this component still breaks on generate – Jean-Pierre Engelbrecht Oct 24 '22 at 10:12
  • Hm, right it's `public` in Nuxt3 now and not `static` anymore. Maybe update the dir to be `public` so. @Jean-PierreEngelbrecht – kissu Oct 24 '22 at 10:15
  • just tested it, even when setting dir to public it still doesnt work. what is odd for me is that it works in dev mode but not on static generation, so i am wondering if this is just some compatibility issue – Jean-Pierre Engelbrecht Oct 24 '22 at 10:25
  • The fact that it works in dev is not surprising at all since it's far easier to setup when you have an actively running dev server. Totally legit. I'm not sure if there are not some things that may be related to your issues: https://github.com/nuxt/image/issues?q=is%3Aissue+static+ I'm not sure that `@nuxt/image-edge` is still the way to go tho, since I saw some people successfully running their thing without the latest version. – kissu Oct 24 '22 at 10:29
  • so i think only image-edge supports nuxt3 at this point. https://v1.image.nuxtjs.org/get-started/ – Jean-Pierre Engelbrecht Oct 24 '22 at 10:36
  • Nvm, you're damn right haha. – kissu Oct 24 '22 at 10:38
  • Not working for me either with Nuxt3, posted a comment here https://github.com/nuxt/image/issues/215#issuecomment-1692573101. Will look into nuxt/image-edge. – Ivan Lim Aug 25 '23 at 00:16
0

In my case for nuxt3 in nuxt.config.ts:

modules: ['@nuxt/image-edge'],
image: { dir: 'assets/img' }

Inside assets/img there is a file 'logo.png'

if I write src like <NuxtImg src="logo.png" format="wepb"/> - it works in dev and error to get file after build and start

But if src starts with '/' like <NuxtImg src="/logo.png" format="wepb"/> - it perfectly works in dev and after build

Taras Zaverukha
  • 1