URL-адрес изображения не перенаправляется на порт 8000 в Django при работе с React

Я работаю над проектом, где бэкенд - Django Rest Framework, а фронтенд - React. У меня есть экран продукта, на котором перечислены детали продукта. На экране продукта я сначала получаю объект продукта из хранилища Redux, а затем использую этот продукт для отображения деталей, а также изображения продукта из URL.

Получение объекта продукта из магазина Redux:

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

Тег изображения:

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

Я создал файл setupProxy.js, где установил целевой порт 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,
    })
  );
};

Но когда я загрузил изображение из панели администратора Django, url изображения на экране продукта выглядит так:

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

вместо:

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

Как я могу решить эту проблему?

Вернуться на верх