Estoy trabajando en un proyecto donde el backend es Django Rest Framework y el frontend es React. Tengo una pantalla de producto en la que se enumeran los detalles del producto. En la pantalla del producto, primero obtengo el objeto del producto de la tienda Redux y luego uso ese producto para representar los detalles y también la imagen del producto desde la URL.

Obteniendo el objeto del producto de la tienda Redux:

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

Etiqueta de imagen:

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

Configuré un archivo setupProxy.js donde configuré el puerto de destino 8000.

ConfiguraciónProxy.js

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

Pero cuando cargué una imagen desde el panel de administración de Django, la URL de la imagen en la pantalla del producto resulta ser:

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

en vez de:

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

¿Cómo puedo solucionar este problema?