Search code examples
javascriptimageoptimizationnuxt.jsnuxt3.js

NuxtImage returning 404

I've installed NuxtImage in my Nuxt3 project. According to the docs (https://image.nuxt.com/get-started/installation), I should be able to just swap out an img element with the NuxtImage component like so:

Before:

<img src="_nuxt/assets/img/my-image.jpg" />

After:

<NuxtImg src="_nuxt/assets/img/my-image.jpg" />

The img tag works as expected, but the NuxtImg component returns a 404:

GET http://localhost:3000/_ipx/_/_nuxt/assets/img/my-image.jpg 404 (IPX_FILE_NOT_FOUND)

Eh?

Solution

  • Add this to nuxt.config:

      image: {
    dir: 'assets/img'
  },

    (The default behavior was to look for images in the public directory, which as was the problem.)

    Then this works:

    <NuxtImg src="/my-image.jpg" />