Images not loading after using 'npm run build'

Question

I'm still pretty new to react and I have an application that I'm trying to deploy to the web. I've noticed that when I use 'npm run build' it doesn't populate my chunk.js scripts with a '.' before the location. That's an easy fix, I just add the '.' manually and move on with my life. But now it's doing the same thing with images, and these are rendered dynamically so it's not an easy manual fix once the build is run. I've got code below.

For example: <script src="/static/js/2.4724d625.chunk.js"></script>instead of <script src="./static/js/2.4724d625.chunk.js"></script>

I tried manually entering the period like so:

const Certificate = ({
  firstName,
  lastName,
  completionDate,
  userToken,
  division
}) => (
  <div id="box" className="container-fluid text-center">
    <div id="nice-border">
      <div className="row">
        <div className="col-12">
          <div id="sov-logo">

            // this is where i manually put a . before the logo directory

            <img src={`.${Logo}`} alt="Logo" />
          </div>
        </div>
      </div>

but that didn't help at all. It seems that the build just ignores that. So how can I get these images to work properly once it's deployed on a server?

This is how the image looks when I inspect it in the browser: <img src="/static/media/capitolREDback.dad6f9b2.jpg" alt="Logo"> and as soon as I add a dot like so: <img src="./static/media/capitolREDback.dad6f9b2.jpg" alt="Logo"> it loads the image just fine. How do I fix this?

Answer 1

In your package.json, set "homepage" to "."

Then you can build and deploy correctly.