Unable to load images from strapi in local during development

[sdole]

Summary

I have a local setup with a next js server and a strapi server. I can hit the localhost url of a strapi image like so http://localhost:1337/uploads/image.png. When I use that url in a nextjs image tag, I get this error in next js logs. There is no request to strapi at all.
⨯ upstream image http://localhost:1337/uploads/image.png resolved to private ip ["::1","127.0.0.1"]

I have remote patterns set to the following and that seems to be correct

{
                protocol: 'http',
                hostname: 'localhost',
                port: '1337',
                pathname: '/**/*',
            }

What could I be doing wrong?

Additional information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 
  Available memory (MB): 65361
  Available CPU cores: 20
Binaries:
  Node: 22.16.0
  npm: 11.4.2
  Yarn: 1.22.21
  pnpm: N/A
Relevant Packages:
  next: 16.0.1 // There is a newer version (16.0.3) available, upgrade recommended! 
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.9.3
Next.js Config:
  output: standalone
 ⚠ There is a newer version (16.0.3) available, upgrade recommended! 
   Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
   Read more - https://nextjs.org/docs/messages/opening-an-issue

Example

No response

[Dearonski]

Hi, I had the same problem after migrating from Next 15.5.3 to Next 16.0.3. I also use Strapi on the backend.
Try adding this line in next.config.ts - it solved my problem:

images: {
    dangerouslyAllowLocalIP: true,
}

But i think this setting should only be enabled in development mode, as it may cause security issues in production.

[goodnewsj62]

dangerouslyAllowLocalIP:

Thanks

[mikelpr]

wondering how would I safely use this then in production if I have the images running on another container in the same host

[sdole]

That's what I have too. Not sure why it is deemed dangerous.

[goodnewsj62]

Here is how I implemented mine. I used a dev flag. Hope this helps :)

import type { NextConfig } from "next";
import createNextIntlPlugin from "next-intl/plugin";

const backendURL =
  process.env.NEXT_PUBLIC_BACKEND_URL || "http://localhost:8082";
const IsDEV = backendURL.startsWith("http://localhost");

const nextConfig: NextConfig = {
  experimental: {
    ppr: "incremental",
  },
  async rewrites() {
    return [
      {
        source: "/api/:path*",
        destination: `${backendURL}/:path*`,
      },
    ];
  },
  images: {
    dangerouslyAllowLocalIP: IsDEV,
    remotePatterns: [
      {
        protocol: IsDEV ? "http" : "https",
        hostname: new URL(backendURL).hostname, // ✅ only your backend
      },
    ],
  },

  
};

[mikelpr]

@goodnewsj62

I used a dev flag.

thing is I need to use it in production, not just while testing on dev, since the images are server from another container running on that same host so the container's IP is on the internal range

[goodnewsj62]

I don't really get it though. However, in my prod system it works just fine as the backend URL is https. I believe it should work over https and in prod because you expose your backend even in a container through a reverse proxy like nginx or Apache.That way it works.  Although I do not run nextjs in a container, my backend are all containerized and ISDev is false but it still works as expected.

[goodnewsj62]

In rare cases when self-hosting Next.js on a private network, you may want to allow optimizing images from local IP addresses on the same network. This is not recommended for most users because it could allow malicious users to access content on your internal network.By default, the value is false.
If you need to optimize remote images hosted elsewhere in your local network, you can set the value to true.
https://nextjs.org/docs/app/api-reference/components/image#dangerouslyallowlocalip

I think you should set it as true if and only if all images will be served within the network 
If it was me i will expose the server and perhaps add an authentication or encrypt using AES/RSA  so even if it is exposed only those with the key can access content 

[goodnewsj62]

In rare cases when self-hosting Next.js on a private network, you may want to allow optimizing images from local IP addresses on the same network. This is not recommended for most users because it could allow malicious users to access content on your internal network. By default, the value is false. If you need to optimize remote images hosted elsewhere in your local network, you can set the value to true. https://nextjs.org/docs/app/api-reference/components/image#dangerouslyallowlocalip I think you should set it as true if and only if all images will be served within the network If it was me i will expose the server and perhaps add an authentication or encrypt using AES/RSA so even if it is exposed only those with the key can access content sender notified by Mail Track for Gmail <https://www.mailtrack.email/?utm_source=watermark&utm_medium=email> <https://www.mailtrack.email/?utm_source=watermark&utm_medium=email> [image: ft34ddz98tt-5e9265db6b643a30]

…

On Fri, Dec 12, 2025 at 5:54 AM Mikel Pérez ***@***.***> wrote: @goodnewsj62 <https://github.com/goodnewsj62> I used a dev flag. thing is I need to use it in production, not just while testing on dev, since the images are server from another container running on that same host so the container's IP is on the internal range — Reply to this email directly, view it on GitHub <#86147 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AONHC6EER3NU6NEZG2RCSGT4BJDB5AVCNFSM6AAAAACMFHOPGCVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTKMRTGY3TEOA> . You are receiving this because you were mentioned.Message ID: <vercel/next .***@***.***>