1

我正在修改 Gatsby 的博客，速度很快，一切看起来都很完美，但我面临着不同类型的问题，因为我通过 Netlify CMS 获得的图像在博客中没有正确显示，图像看起来很模糊。我不知道这里出了什么问题。

这是问题陈述的示例

演示

这是我的 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`,
            },
        },

包.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"
  }
}

配置.yml

media_folder: static/blogs
public_folder: blogs

collections:
- name: blog
  label: Blog
  folder: "content/blog"
  create: true

这是问题的演示和复制的存储库链接 REPO LINK

先感谢您。

4

1 回答 1

2

我对如何在组件中调用这些图像而不是package.json（它似乎不是依赖项问题）更感兴趣，因为检查代码，似乎您添加了/static不需要的路径。如以下屏幕截图所示： 在此处输入图像描述

关于来自以下评论的更新，我们发现该问题与此GitHub 问题直接相关，其中显然通过降价检索到的图像模糊不清。解决这个问题的方法是在 Gatsby 的配置中传递一个withWebp参数，所以在gatsby-config.js：

  {
    resolve: 'gatsby-remark-images',
    options: {
      maxWidth: 1920,
      withWebp: true,
    },
  },

感谢@Mr。耐心的金字塔。

于 2020-03-22T10:13:53.577 回答