图片加载模糊或无法加载-Gatsby和GitHub Pages

Question

我是gatsby的超级新手，距离接触任何类型的Web开发项目已有一段时间了。

我正在尝试使用此gatsby模板创建摄影作品集 https://github.com/LekoArts/gatsby-starter-portfolio-emilia和我的github帐户（github页面）。

问题出在主页上，我无法用作封面图片的图像，在相册中，我得到的是模糊版本或怪异的灰度版本。在开发中，它们工作得很好。

我正在MacOS High Sierra上运行，并尝试使用Firefox，Chrome和Safari。 （不确定是否相关）

这里有一些开发人员诉说部署图片。

我将发布一些代码；但是如果还不够，请问我一些事情，我会更新问题。我真的不确定从哪里开始调试。

这是我的package.json

{
  "name": "photos",
  "description": "photo portfolio",
  "version": "3.0.0",
  "author": "Alex Ingberg (hi@alexingberg.com)",
  "scripts": {
    "develop": "gatsby develop",
    "dev": "gatsby develop -o",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "deploy": "gatsby build && gh-pages -d public --branch master",
    "lint": "eslint . --ext .js,.jsx --ignore-path .gitignore",
    "lint:fix": "eslint . --ext .js,.jsx --fix --ignore-path .gitignore",
    "format": "prettier \"**/*.{md,mdx} \" --write",
    "lint:ci": "yarn lint --format junit -o results/eslint/result.xml",
    "cy:open": "cypress open",
    "cy:run": "cypress run",
    "cy:run:ci": "cypress run --browser chrome --reporter junit --reporter-options 'mochaFile=results/cypress/result.xml'",
    "test:e2e:dev": "cross-env CYPRESS_SUPPORT=y start-server-and-test dev http://localhost:8000 cy:open",
    "test:e2e:run": "cross-env CYPRESS_SUPPORT=y start-server-and-test develop http://localhost:8000 cy:run",
    "test:e2e:ci": "cross-env CYPRESS_SUPPORT=y start-server-and-test develop http://localhost:8000 cy:run:ci"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.6.3",
    "@fortawesome/fontawesome-svg-core": "^1.2.17",
    "@mdx-js/mdx": "^1.0.10",
    "@mdx-js/react": "^1.0.6",
    "babel-plugin-styled-components": "^1.10.0",
    "font-awesome": "^4.7.0",
    "gatsby": "^2.9.11",
    "gatsby-image": "^2.1.4",
    "gatsby-mdx": "^0.6.2",
    "gatsby-plugin-google-analytics": "^2.0.18",
    "gatsby-plugin-lodash": "^3.0.5",
    "gatsby-plugin-manifest": "^2.0.29",
    "gatsby-plugin-netlify": "^2.0.14",
    "gatsby-plugin-offline": "^2.0.25",
    "gatsby-plugin-react-helmet": "^3.0.12",
    "gatsby-plugin-sharp": "^2.0.35",
    "gatsby-plugin-sitemap": "^2.0.12",
    "gatsby-plugin-styled-components": "^3.0.7",
    "gatsby-remark-external-links": "^0.0.4",
    "gatsby-source-filesystem": "^2.0.29",
    "gatsby-transformer-sharp": "^2.1.18",
    "gh-pages": "^2.0.1",
    "lodash": "^4.17.11",
    "polished": "^3.2.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-helmet": "^5.2.0",
    "react-spring": "^8.0.19",
    "styled-components": "^4.2.0",
    "styled-theming": "^2.2.0",
    "typeface-fira-sans": "^0.0.54",
    "typeface-montserrat": "^0.0.54"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.1",
    "cross-env": "^5.2.0",
    "cypress": "^3.2.0",
    "cypress-testing-library": "^2.4.0",
    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^4.1.0",
    "eslint-plugin-cypress": "^2.2.1",
    "eslint-plugin-import": "^2.17.2",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-react": "^7.12.4",
    "@fortawesome/fontawesome-free": "^5.6.3",
    "gatsby-cypress": "^0.1.8",
    "prettier": "^1.17.0",
    "start-server-and-test": "^1.7.13"
  },
  "homepage": "https://www.alexingberg.com/photos",
  "bugs": {
    "url": "https://github.com/alexing/photos/issues"
  },
  "keywords": [
    "gatsby",
    "gatsby-starter",
    "gatsby-starter-portfolio",
    "alexing"
  ],
  "license": "MIT",
  "main": "n/a",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/alexing/photos.git"
  }
}

此外，在我的仓库的developer分支中，您可以找到完整的源代码。 https://github.com/alexing/photos/tree/develop

谢谢。