Having issue with defining path for image in a react application

Question

I'm having an issue with defining image path in react application and it's getting frustrating so I'm seeking help from the pros. I'm moving my images folder back and forth between public and src. When background:url(path) works, img src="path" doesn't work and vice-versa. I get this error "Error: Can't resolve 'images/img-2.jpg' in '/Applications/MAMP/htdocs/react-web/src'". If I move the images folder to src, it works but the background:url(path) does not load image. I have the project in https://github.com/miraj977/react-project/. Another issue is github pages; I have setup this project in gh-pages (https://miraj977.github.io/react-project/) but it only loads up to nav and stops. Doesn't load body. Also, I have set homepage in package.json "https://miraj977.github.io/react-project/" but whenever I click the logo which should redirect to homepage, it redirects to "https://miraj977.github.io/". I have shared the link to the github project for you to review the code. It's getting quite frustrating now. Please guide me on the right way to solve these issues. Your time is highly appreciated. Thank you in advance.

Answer 1

Only the navbar showing is actually related to your routing configuration.

Instead of this:

function App() {
  return (
    <>
      <Router>
        <Navbar />
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/services" exact component={Services} />
          <Route path="/products" exact component={Products} />
          <Route path="/sign-up" exact component={SignUp} />
        </Switch>
      </Router>
    </>
  );
}

do this:

function App() {
  return (
    <>
      <Router>
        <Navbar />
        <Switch>
          <Route path="/react-project" exact component={Home} />
          <Route path="/react-project/services" exact component={Services} />
          <Route path="/react-project/products" exact component={Products} />
          <Route path="/react-project/sign-up" exact component={SignUp} />
        </Switch>
      </Router>
    </>
  );
}

Since your homepage url is suffixed with /react-project you want to account for this in your routes and redirects.

---

So to be extra clear your navigation Link components in your Navbar should also be changed from this:

<Link to="/" className="navbar-logo" onClick={closeMobileMenu}>
  1 TRVL 2 <i class="fab fa-typo3" />3{" "}
</Link>

to this:

<Link to="/react-project" className="navbar-logo" onClick={closeMobileMenu}>
  1 TRVL 2 <i class="fab fa-typo3" />3{" "}
</Link>

---

As for the image problem.

For specifying the img by src you can do something like this:

import img1 from "../images/img-1.jpg"; // relative path from directory this component file is in
// ...

<CardItem
  src={img1}
  text="Explore the hidden waterfall deep inside the Amazon Jungle"
  label="Adventure"
  path="/services"
/>

For specifying an image as a background image via css you can do something like this:

background: url("../images/img-home.jpg"); // Also relative to current file location

Paths from the public url apparently don't resolve like they used to anymore in create react app 4, see this github issue.