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

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