Я обновляю блог для Гэтсби, который молниеносно, все кажется идеальным, но я сталкиваюсь с другой проблемой, так как изображения, которые я имею через Netlify CMS, не отображаются должным образом в блоге, изображения выглядят размытыми. Я не знаю, что здесь происходит не так.
Вот пример постановки задачи
DEMO
вот выдержка из моего gatsby-config. js.
plugins: [
`gatsby-plugin-sitemap`,
`gatsby-plugin-netlify-cms`,
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/static/home`,
name: 'home',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/static/blogs`,
name: 'blogs',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/static/author`,
name: 'author',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/static/svg`,
name: 'svg',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/content`,
name: 'pages',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/content`,
name: 'blog',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'assets',
path: `${__dirname}/static`,
},
},
package. json
{
"name": "Bhavikji",
"private": true,
"description": "Bhavikji website",
"version": "2.0.0",
"author": "Oscar",
"dependencies": {
"@mdx-js/mdx": "^1.5.3",
"@mdx-js/react": "^1.5.3",
"bootstrap": "^4.4.1",
"disqus-react": "^1.0.7",
"gatsby": "^2.18.12",
"gatsby-image": "^2.2.34",
"gatsby-paginate": "^1.1.1",
"gatsby-plugin-catch-links": "^2.1.21",
"gatsby-plugin-google-analytics": "^2.1.34",
"gatsby-plugin-manifest": "^2.2.31",
"gatsby-plugin-netlify": "^2.1.30",
"gatsby-plugin-netlify-cms": "^4.1.33",
"gatsby-plugin-offline": "^3.0.30",
"gatsby-plugin-optimize-svgs": "^1.0.3",
"gatsby-plugin-prefetch-google-fonts": "^1.4.3",
"gatsby-plugin-react-helmet": "^3.1.16",
"gatsby-plugin-react-svg": "^3.0.0",
"gatsby-plugin-robots-txt": "^1.5.0",
"gatsby-plugin-sass": "^2.1.26",
"gatsby-plugin-sharp": "^2.3.5",
"gatsby-plugin-sitemap": "^2.2.26",
"gatsby-remark-autolink-headers": "^2.1.22",
"gatsby-remark-copy-linked-files": "^2.1.35",
"gatsby-remark-images": "^3.1.39",
"gatsby-remark-lazy-load": "^1.0.2",
"gatsby-remark-normalize-paths": "^1.0.0",
"gatsby-remark-prismjs": "^3.3.29",
"gatsby-remark-relative-images": "^0.2.3",
"gatsby-remark-responsive-iframe": "^2.2.31",
"gatsby-remark-smartypants": "^2.1.19",
"gatsby-source-filesystem": "^2.1.40",
"gatsby-transformer-remark": "^2.6.45",
"gatsby-transformer-sharp": "^2.3.7",
"intersection-observer": "^0.7.0",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"netlify-cms-app": "^2.10.1",
"node-sass": "^4.13.0",
"prismjs": "^1.18.0",
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-clamp-lines": "^3.0.2",
"react-dom": "^16.12.0",
"react-helmet": "^5.2.1",
"save": "^2.4.0",
"sharethis-reactjs": "^1.5.0",
"styled-components": "^5.0.0"
},
"devDependencies": {
"@babel/core": "7.7.7",
"@babel/plugin-proposal-class-properties": "7.7.4",
"@babel/plugin-proposal-optional-chaining": "7.7.5",
"@babel/plugin-transform-flow-strip-types": "^7.7.4",
"@babel/preset-env": "7.7.7",
"@babel/preset-react": "7.7.4",
"autoprefixer": "9.7.3",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.0.3",
"babel-jest": "24.9.0",
"babel-preset-gatsby": "0.2.26",
"browserslist": "4.8.2",
"concurrently": "5.0.2",
"eslint": "6.8.0",
"eslint-config-airbnb-base": "14.0.0",
"eslint-plugin-import": "2.19.1",
"eslint-plugin-jest": "23.2.0",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "7.17.0",
"eslint-watch": "6.0.1",
"prettier": "^1.19.1",
"rimraf": "3.0.0",
"stylelint": "12.0.1",
"stylelint-config-recommended-scss": "4.1.0",
"stylelint-scss": "3.13.0"
},
"keywords": [
"gatsby"
],
"license": "MIT",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
"lint:js": "eslint --cache --ext .js,.jsx .",
"lint:scss": "stylelint \"src/**/*.scss\"",
"lint": "concurrently \"yarn run lint:js\" \"npm run lint:scss\" \"yarn flow\""
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}
config.yml
media_folder: static/blogs
public_folder: blogs
collections:
- name: blog
label: Blog
folder: "content/blog"
create: true
Вот ссылка на репозиторий для ДЕМО и воспроизведение номера РЕПО ЛИНК
Заранее спасибо.