I am working on a project where backend is Django Rest Framework and frontend is React. I have a Product Screen where I have Product details listed down. In Product Screen I first fetch product object from Redux store and then use that product to render details and also image of the product from the URL.

Fetching product object from Redux store:

const productDetails = useSelector((state) => state.productDetails);
const { error, loading, product } = productDetails;

Image Tag:

<Image src={product.image} alt={product.name} fluid />

I have setup a setupProxy.js file where I set the target port 8000.

SetupProxy.js

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    "/api",
    createProxyMiddleware({
      target: "http://127.0.0.1:8000",
      changeOrigin: true,
    })
  );
};

But when I have image uploaded from Django Admin Panel the image url in Product Screen turns out to be:

http://localhost:3000/images/sample.jpg

instead of:

http://localhost:8000/images/sample.jpg

How can I fix this issue?