No _ipx folder after nuxt build command

[shlomi93]

Hello I'm trying to use NuxtImg without success in my SSR Nuxt3 project. The following happens in both Windows 10, and Ubuntu 24.04 LTS i have installed it and in nuxt.config i've added:

  modules: [ "@nuxt/image"],

image: {
    domains: [
        "localhost",
        amazonaws S3 bucket address here
    ],
    provider: "ipx",
},

then in a specific component:

<NuxtImg :src='props.imagePath'  :alt="'section ' + props.title" />

[props.imagePath is "/assets/icons/test.webp" for example and it is found inside public folder, so actually public/assets/icons/man.webp]

then I run nuxt build and then node .output/server/index.mjs

when inspecting the image, i can see that the src is /ipx//.... but there is not /_ipx/ dir in .output/ or any of its sub-dirs

why i don't get the ipx folder?

Thanks

[hmingv]

Same problem

[CharlesBT]

same problem with v1.7.0 1.7.1 and 1.8.0, whereas is was working last month with 1.7.1, it seems a dependency has changed under the hood. I have tested to force sharp 33.4 but it doesn't help

[CharlesBT]

Adding "ipx": "3.0.1" as devdependencies solveed the issue of prerendering images in the public folder under _ipx BUT doesn't help on images hosted on an external blob storage like Azure Blob,

I don't know why both where working since a while previously, it seems something has changed since the last 3/4 weeks

[ToaderDaniel]

Not sure if this is your case but from my tests it only works with ssr: true and router.options.hashMode: false

[shlomi93]

Update:

I’ve solved this issue, but I haven’t had much time to sit down and write the fix due to other large projects at work. I’ll try to get to it on Saturday and share the full solution with everyone.

Here’s what I can say for now:

Support for this (official!!) module is terrible and practically non-existent. The issue comes from a misunderstanding of the module — IPX is not a folder! It’s a server running alongside your project. The main guideline to solving this issue is to ensure your server points to the correct IPX server path. Once that’s set up, everything works as expected, and image requests are properly routed to the IPX server, which returns the optimized images.

The real problem, of course, is the almost non-existent documentation for this module. I hope I’ll be able to write up the full solution for everyone, as this issue affects many Nuxt developers.

Any contributor may say that I’m wrong, but the fact is, none of them have helped solve the issue, and my solution works.

[hmingv]

Looking forward to your progress

[avpengage]

@shlomi93 It would be really great to get some info on how you solved this? Any chance you could provide some details? Seems this is still a problem for a number of people... :-(

TIA

[Moonlight63]

I am also trying to figure out where ipx is serving, because it doesn't seem to be under _ipx. I am wondering if there is a nitro config to proxy to it. Never actually used this module before even though I have been using nuxt for years. Digging into the source now to see if I can figure it out.

[shlomi93]

Hi everyone,

Sorry for the delay—I'm from Israel, so things have been a bit complicated lately. But let’s get to the solution:

IPX acts as a server/service for image optimization, so if you’re using Nginx, you’ll need to configure it correctly to work with IPX. In your website’s Nginx configuration file, add the following settings (you can add more configurations as needed, such as caching or allowed methods):

Nginx configuration files are typically located in /etc/nginx/sites-available/.

server {
   ....
   ....

    # Proxy to Nuxt's IPX server for image optimization
    location ^~ /_ipx/ {
        proxy_pass http://127.0.0.1:<nuxt_website_port>/_ipx/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # Cache optimized images (example)
        expires 30d;
        add_header Cache-Control "public, max-age=2592000";
        # Explicitly allow HEAD requests (example)
        if ($request_method !~ ^(GET|HEAD)$) {
            return 405;
        }
    }

    ....
    ....
}

Replace with the port your Nuxt server is running on (typically 3000 unless configured otherwise). This setup should resolve the issue and allow the Nuxt Image module to function correctly.

@hmingv @avpengage @Moonlight63

[Moonlight63]

In my case I am just running the nitro dev server. There is no reverse proxy involved. Ipx just isn't being served by the module.