I am super new to gatsby and it's been a while since i touched any kind of web development project.
I am trying to create a photography portfolio using this gatsby template https://github.com/LekoArts/gatsby-starter-portfolio-emilia and my github account (github pages).
The problem is in the main page the image im using as cover picture doesn't load and in the album I'm either getting a blurred version or a weird grayscale version. In development they work just fine.
I'm running on MacOS High Sierra and have tried Firefox, Chrome and Safari. (not sure if relevant)
Here are some dev v. deploy pictures.
I'll post some of the code; but if it's not enough just ask me about something and I'll update the question. I'm really not sure where to begin debugging.
This is my 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"
}
}
Also, in the develop branch of my repo you can find the complete source code. https://github.com/alexing/photos/tree/develop
Thanks a million.