gatsby-remark-images are not receiving the path-prefix

[MurphyPone]

Description

I'm trying to render images from some markdown blogposts on a site being hosted on GitHub Pages that's at a url like:

"username.github.io/reponame/specific-blog-post-page",

but I'm receiving 404 errors as the markdown is trying to pull from

"username.github.io/static/.../image.jpg" rather than ""username.github.io/reponame/static/.../image.jpg"

This results in drastically compressed images that never "blur up" (I'm guessing this has to do with gatsby-plugin-sharp)

This issue doesn't occur on the local development environment, only after running gatsby build --prefix-paths && gh-pages -d public

I've tried clearing the .cache and public folders multiple times, and exhausted every other related issue I could find to no avail.

Steps to reproduce

Issue occurs here: https://murphypone.github.io/code-blog/how-to-run-a-hackathon/

Here's my file structure and declaration of an image in the markdown file:

Expected result

Looking at other starter-blogs running on comparable dependency versions, the expected result would be images that load gradually via gatsby-plugin-sharp

Actual result

The markdown file can't resolve the path to the full-scale images, throws a 404, and substitutes the intended image with the downscaled image (that gets generated during deployment?)

Environment

System: OS: macOS 10.14.2 CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz Shell: 3.2.57 - /bin/bash Binaries: Node: 8.11.3 - /usr/local/bin/node npm: 6.9.0 - /usr/local/bin/npm Languages: Python: 2.7.15 - /usr/local/bin/python Browsers: Chrome: 74.0.3729.108 Safari: 12.0.2 npmPackages: gatsby: ^2.3.27 => 2.3.27 gatsby-image: ^2.0.39 => 2.0.40 gatsby-plugin-catch-links: ^2.0.13 => 2.0.13 gatsby-plugin-manifest: ^2.0.29 => 2.0.29 gatsby-plugin-offline: ^2.0.25 => 2.0.25 gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12 gatsby-plugin-robots-txt: ^1.4.0 => 1.4.0 gatsby-plugin-sharp: ^2.0.35 => 2.0.35 gatsby-plugin-sitemap: ^2.0.12 => 2.0.12 gatsby-plugin-styled-components: ^3.0.7 => 3.0.7 gatsby-remark-copy-linked-files: ^2.0.12 => 2.0.12 gatsby-remark-images: ^3.0.10 => 3.0.10 gatsby-source-filesystem: ^2.0.29 => 2.0.29 gatsby-transformer-remark: ^2.3.10 => 2.3.10 gatsby-transformer-sharp: ^2.1.18 => 2.1.18 npmGlobalPackages: gatsby-cli: 2.5.12

[nephlin7]

Hi @MurphyPone,

did you set "/code-blog" pathPrefix on gatsby-config.js?

gatsby-config.js

module.exports = {
    pathPrefix: `/code-blog`,
    plugins: [
      ....
    ]
}

[MurphyPone]

Hi @MurphyPone,

did you set "/code-blog" pathPrefix on gatsby-config.js?

gatsby-config.js

module.exports = {
    pathPrefix: `/code-blog`,
    plugins: [
      ....
    ]
}

Yup, tried that.

[nephlin7]

Hi @MurphyPone, did you set "/code-blog" pathPrefix on gatsby-config.js?

gatsby-config.js

module.exports = {
    pathPrefix: `/code-blog`,
    plugins: [
      ....
    ]
}

Yup, tried that.

Ok, i will try to reproduce the error, to try to solve it. I keep you updated.

[DSchau]

@MurphyPone I just checked out your project, and ran the following steps:

yarn
yarn build
yarn serve --prefix-paths

and was able to see the images with the correct paths. Could you share any more details to help reproduce?

[DSchau]

Also I'd recommend you not commit your .cache folder to Github, as an aside!

[MurphyPone]

I'm ramming my head against the keyboard looking at the solution, still not sure why it worked.

I was running gatsby build instead of yarn build or npm run build. The latter two refer to the package.json which includes the parameter --path-prefix.

I would always run gatsby-build before npm run deploy which includes that parameter, but it seems like unnecessarily calling gatsby-build (w/o --path-prefix) right before npm run deploy caused some conflict where the pages weren't actually being rebuilt with the path prefixes.

Working now, thanks for the help!

[macdonst]

@MurphyPone well your comment really helped me. I had done a gatsby build first and then a gatsby build --prefix-paths before deploying to github pages. I was running into the same issue so deleting the .cache folder worked a charm.

[collinkrawll]

I just ran into this. Running gatsby clean and then gatsby build --prefix-paths again fixed it.

[adcoding]

I'm having the same issue. I'm also using gh actions. Images are there but blurred with a 404 error in console.

https://lentsius-bark.github.io/krystof-klestil/blog/url-of-the-post/

publish.yml

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - uses: enriikke/gatsby-gh-pages-action@v2
        with:
          access-token: ${{ secrets.******* }}
          deploy-branch: gh-pages
          gatsby-args: --prefix-paths

The blog build goes in the gh-pages branch and in the master branch I have the blog. Does it make sense?