Image is not loading in server side rendering with react

Question

I'm doing server-side rendering with React DOM Server using Create React App. I'm trying to load a static image but it's not showing up in my browser. Here is my app.js code

import './App.css';
import React from "react";
import Pic from './Images/pic.png'
function App() {
  return (
    <div className="App">
      <img src={Pic} />
    </div>
  );
}
export default App;

The image is copied into the build folder but it's not showing up in the browser Folder hierarchy

I get the following error in the browser

GET http://localhost:8000/[object%20Object]

Answer 1

Try

<img src={require(./Images/pic.png)} width="100" height="50" />