Я очень новичок в Гэтсби, и я давно уже занимался любым проектом веб-разработки.
Я пытаюсь создать портфолио фотографий, используя этот шаблон Гэтсби https://github.com/LekoArts/gatsby-starter-portfolio-emilia и мойАккаунт github (github pages).
Проблема в том, что на главной странице изображение, которое я использую в качестве обложки, не загружается, а в альбоме я получаю размытую версию или странную версию в оттенках серого.В разработке они работают просто отлично.
Я работаю на 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"
}
}
Кроме того, в ветке разработки моего репозитория вы можете найти полный исходный код.https://github.com/alexing/photos/tree/develop
Спасибо миллион.