Images not showing on heroku-deployed React app, but responding with 200 - reactjs

Question

I have a simple react app deployed on Heroku, (using the static-build pack https://github.com/heroku/heroku-buildpack-static) however the images are not loading. I know this must have to do something with the path, as it works for me locally, however nothing I have tried works.
Here is what the directory looks like
build
index.html
bundle.js
node_modules
public
images
logo.png
index.html
src
components
LeftSidebar
index.js
static.json
webpack.config.js
Here is my static.json file:
{
"root": "build",
"routes": {
"/**": "index.html"
},
"https_only": true
}
I have set the image src (jsx in the LeftSidebar component) to have a relative path from the build to the public directory. The relative path from the build folder to the public folder like so:
"../public/images/logo.png"
The reason I did the above, is because I figured that since the only thing that is actually being ran in the browser is the index.html file which loads the bundle.js, which is invoking the <img /> this relative path would work. (please correct me if I'm wrong here)
I have also tried setting the path such that it is relative from my specific component LeftSidebar -- index.js to the image in the public folder:
../../../public/images/logo.png
I have also tried
public/images/logo.png
and a few other variations, all with no luck.
I think that I must be missing something more important about the way a static web server (Nginx in this case) will server static assets. Or int he way Webpack ultimately creates the bundle.js file.
It is also quite odd that there is no 404 status code returning, but the image won't load and the response in the network tab is nothing but a white screen.

Answer 1

When importing images into React, we usually rely on Webpack to copy the appropriate files over, rather than having to reference a public directory, e.g.
src
components
MyComponent
index.jsx
image.png
In my index.jsx file, I'd simply import the image like so:
import myImage from './image.png';
Finally, and most importantly, you need to update your Webpack config to include a loader for your images if doesn't already include one, such as file-loader.
See this question/answer for more details on the process: How to import image (.svg, .png ) in a React Component