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
Как я могу решить эту проблему?