github-pages - Gatsby 图像不工作 - 部署时图像模糊或根本不显示

Question

项目描述：使用 Gatsby 创建一个作品集网站来展示我的 JavaScript 项目。

问题：我无法在部署到 github 页面时使用 gatsby-image 加载图像 - 它适用于我的本地计算机。如果我使用 childImageSharp.fixed 它是模糊的，如果我使用 childImageSharp.noBase64 图像根本不会显示。

我试过的：我试过删除我的公共和 .cache 文件夹并重建（很多次） - 没用。我曾尝试使用旧版本的 Gatsby 和 gatsby-images 这不起作用，它似乎破坏了其他东西。我尝试过提高质量，但更改了一些设置，但没有奏效。这些都是我在过去几天阅读的其他 StackOverflow 帖子中尝试过的所有内容。

*注意：我也尝试不使用 Gatsby 图像，即使没有 Gatsby 图像，您也会在我的查询中看到很多其他数据，我无法让图像显示没有损坏。但是使用 gatsby 图像，如我上面所述，它要么是模糊的要么是空白的。

Github 仓库： https ://github.com/mk0b/gatsby-portfolio-site

实时 Github 页面站点： https ://mk0b.github.io/gatsby-portfolio-site/

**关于结构的注释 - 我的 graphQL 查询位于 Projects.js 中，并将所有信息传递给 Project.js，然后使用 gatsby 图像。

感谢您提前提供任何帮助/指导！

标签： github-pagesgatsbygatsby-image

Answer 1

对于 github 页面，需要单独指定公共路径。

盖茨比-config.js

pathPrefix: '/gatsby-portfolio-site',

包.json

"build": "gatsby build --prefix-paths",

祝你好运！