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
      },
    ],
  },

  
};