1

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!

eoja
  • 1,642
  • 2
  • 12
  • 21

1 Answers1

3

withPrefix used like this should work:

<img className={styles.moreInfoImg} src={withPrefix("/img/loadedTruck.jpg")} alt="delivery truck" />
mtricht
  • 427
  • 4
  • 16
  • Thanks that does work! How can I get it to work with css background images? Is an inline style like ````
    ```` the best way to do it? Saw that example here: https://stackoverflow.com/a/61404226/11444813     – eoja Jul 26 '20 at 22:03