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?

Anurag Srivastava · Accepted Answer · 2019-05-24 16:29:30Z

2

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

Then you can build and deploy correctly.

answered May 24, 2019 at 16:29

Anurag Srivastava

14.5k4 gold badges39 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ryan Maki · Accepted Answer · 2023-11-08 22:04:02Z

1

Adding on to what the last answer said, the homepage: "." option works if using create-react-app, but not if using vite. For vite, you have to ass base: "./" to the vite.config.js and it will have the same effect

answered Nov 8, 2023 at 22:04

Ryan Maki

711 silver badge3 bronze badges

Collectives™ on Stack Overflow

Images not loading after using 'npm run build'

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related