I have a React application with an Express-Node.js backend. I have a proxy that links both. Now, I have some static files in a directory within the backend. When I make the request and place the response in the "src" attribute of an image tag, I can display the image, but same result does not happen when I try the link in the browser.

This works in the browser: http://localhost:5000/public/image.png /EXAMPLE ROUTE/

This doesn't: https://localhost/image.png /EXAMPLE ROUTE/

My backend code:

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}/`);
  }
});

My react code:

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;

My problem comes when I go to the browser and type the URL: https://localhost/images/image.png -> This will not display the image the way http://localhost:5000/public/image.png will and all I get is a blank page.

In React's package.json file, I proxy to the backend.

If clarification is needed, let me know. Thanks, in advance.