1

I'm currently trying to help build a site for a club at my university and using gatsby to build and github pages to deploy.

The problem I'm getting is that my images aren't rendering and I think this may help figure out what's happening here

The full site is: https://uoftlug.github.io

The source code is here: https://github.com/UofTLUG/UofTLUG.github.io/tree/main

For reference, I tried a solution that was proposed here: My website images are not loading from the correct link on Github Pages with Gatsby

and that did in fact work this morning, but now it's sadly broken again.

Here's my current gatsby-config.ts

import type { GatsbyConfig } from "gatsby"

const config: GatsbyConfig = {
  siteMetadata: {
    title: `UofTLUG Club Site`,
    siteUrl: `https://www.uoftlug.github.io`,
  },
  // More easily incorporate content into your pages through automatic TypeScript type generation and better GraphQL IntelliSense.
  // If you use VSCode you can also use the GraphQL plugin
  // Learn more at: https://gatsby.dev/graphql-typegen
  graphqlTypegen: true,
  pathPrefix: "/uoftlug.github.io",
  plugins: [],
}

export default config

The way that I deploy this to gh-pages is through this deploy script in my package.json

    "deploy": "gatsby build --prefix-paths && gh-pages -d public",

The images are in the static folder at the root of the project.

Let me know if there's more information you need to help me.

EDIT (June 26. 2022): I probably should also note that the images render correctly when I run gatbsy develop and open the site in localhost

EDIT (June 27. 2022): I've found a way to fix it. What I did was use relative path instead of using the withPrefix function. So instead of withPrefix("/img/tux.png") I used ./img/tux.png

isahmed
  • 11
  • 1
  • 2

0 Answers0