Nextjs does not load external image resource while having image url

I am running 3 containers in the same host. The frontend service is a Nextjs app. I use Apollo/client to query the backend server. After run docker-compose up --build (after build process of nextjs app too.), the frontend query a field which has an image, I receive the response with the image url in the frontend as follow

node:{
  id: "Q2F0ZWdvcnlOb2RlOjI=";
  name: "name-1";
  thumbnail: "http://localhost:8000/graphql/uploads/images/categories/main1.jpeg";
  __typename: "CategoryNode";
}

but nextjs doesn't show the image and I have the following errors:

1. in the console : Failed to load resource: the server responded with a status of 500 (Internal Server Error)

2. In the terminal:

TypeError: fetch failed
c-client    |     at Object.fetch (node:internal/deps/undici/undici:11118:11)
c-client    |     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
c-client    |     at async imageOptimizer (/app/node_modules/next/dist/server/image-optimizer.js:371:29)
c-client    |     at async /app/node_modules/next/dist/server/next-server.js:217:72
c-client    |     at async /app/node_modules/next/dist/server/response-cache/index.js:80:36 {
c-client    |   cause: Error: connect ECONNREFUSED 127.0.0.1:8000
c-client    |       at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1300:16) {
c-client    |     errno: -111,
c-client    |     code: 'ECONNREFUSED',
c-client    |     syscall: 'connect',
c-client    |     address: '127.0.0.1',
c-client    |     port: 8000
c-client    |   }
c-client    | }

Looking the doc I configured next-config file

const nextConfig = {
  reactStrictMode: true,
  output: "standalone",
  compiler: {
    styledComponents: true,
  },
  images: {
    remotePatterns: [
      {
        protocol: "http",
        hostname: "localhost",
        port: "8000",
        pathname: "/graphql/uploads/**",
      },
    ],
  },
};

I don't understand why getting these errors while receiving well the response from the server container.

I try to change the <Image /> component of Nextjs by <img /> component but get the same issue.

How can I fix this issue?

here is the link of my repo: My repo

To use well my repo, you can follow these steps:

• You can run first backend container, makemigrations, migrate and create superuser (Need to open django admin page0
• Then you can create one category from django admin page (download image as thumbnail for category)
• Test graphql query to fetch field categories
• Then you can run the frontend and you will detect the error.

Thanks for any help.