Search code examples
gatsbygithub-pages

My website images are not loading from the correct link on Github Pages with Gatsby

The site is built with Gastby deployed on Github Pages. The link to my images should be like https://eoja82.github.io/lakeside-demo/img/employees/jake.jpg. However, the links are like https://eoja82.github.io/img/employees/jake.jpg, leaving out the /lakeside-demo part.

enter image description here

I'm using pathPrefix in my gastby-config.js file:

module.exports = {
  pathPrefix: "/lakeside-demo",
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-transformer-json`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `./src/components/products/data/`
      }
    },
  ]
}

I have the following script in my package.json file: "deploy": "gatsby build --prefix-paths && gh-pages -d public"

I've tried using Gatsby's withPrefix and assetPrefix but could not come up with any sort of working solution.

Github: https://github.com/eoja82/lakeside-demo
Website: https://eoja82.github.io/lakeside-demo/

Any suggestions will be greatly appreciated!

Solution

  • withPrefix used like this should work:

    <img className={styles.moreInfoImg} src={withPrefix("/img/loadedTruck.jpg")} alt="delivery truck" />