next.config.js image remotePatterns config not working on localhost API

Question

I am trying to serve content in my Next.js (v14.0.4) app from Strapi CMS. I am able to retrieve content properly but I am having trouble with the media assets. I am capable of retrieving the url of an image asset, and I am trying to configure next.js to prepend the src of the image to point to my CMS using remotePatterns config in my next.config.js file as mentioned here, but it isn't working. Here is my next.config.js file:

// @ts-check

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "http",
        hostname: "localhost", // tried 127.0.0.1 as well
        port: "1337",
        pathname: "/uploads/**",
      },
    ],
  },
};

module.exports = nextConfig;

When I run the web app, I console log the url i get from Strapi CMS and can see it is /uploads/blog_article_1_ea6d1235a5.png, but the request to retrieve it returns a 404. In dev tools I see the request is being sent to : http://localhost:3000/uploads/blog_article_1_ea6d1235a5.png, but it should be http://localhost:1337/uploads/blog_article_1_ea6d1235a5.png.

Any idea what could be wrong? Appreciate any help on this!