Tengo una aplicación React con un backend Express-Node.js. Tengo un proxy que une ambos. Ahora, tengo algunos archivos estáticos en un directorio dentro del backend. Cuando realizo la solicitud y coloco la respuesta en el atributo "src" de una etiqueta de imagen, puedo mostrar la imagen, pero no ocurre el mismo resultado cuando pruebo el enlace en el navegador.

Esto funciona en el navegador: http://localhost:5000/public/image.png / RUTA DE EJEMPLO /

Esto no: https://localhost/image.png / RUTA DE EJEMPLO /

Mi código de fondo:

 const express = require('express'); const app = express(); const PORT = process.env.PORT; app.use('/images', express.static(__dirname + '/public')); app.listen(PORT, (err) => { if(err) { throw err; } else { console.log(`Running on http://localhost:${PORT}/`); } });

Mi código de reacción:

 import React from 'react'; import './App.css?v=1'; function App() { return ( <div className="App"> <img src="/images/image.png" alt="Logo" /> /*THIS TOTALLY WORKS*/ <img src="https://localhost/images/image.png" alt="Logo" /> /*THIS TOTALLY WORKS*/ </div> ); } export default App;

Mi problema surge cuando voy al navegador y escribo la URL: https://localhost/images/image.png -> Esto no mostrará la imagen de la forma en que lo hará http://localhost:5000/public/image.png y todo lo que obtengo es una página en blanco.

En el archivo package.json de React, hago proxy al backend.

Si necesita alguna aclaración, hágamelo saber. Gracias por adelantado.