1

我正在关注 Andrew Mead 在 Gatsby Bootcamp 上的 youtube 教程,并且在 3:10:00 分钟内一切正常,但是一旦我安装gatsby-remark-relative-imagesgatsby-remark-images插件并将它们添加到gatsby-config.js文件以显示图像,当我运行时,npm run develop我会收到类似的错误一个如下所示。

在此处输入图像描述 下面是我的 gatsby-config.js 文件。

/**
 * Configure your Gatsby site with this file.
 *
 * See: https://www.gatsbyjs.org/docs/gatsby-config/
 */

module.exports = {
  /* Your site config here */

  siteMetadata:{
    title:'Gatsby Bootcamp',
    author:'Author'
  },
  plugins: [
    'gatsby-plugin-sass',
    {
      resolve:'gatsby-source-filesystem',
      options:{
        name: 'src',
        path: `${__dirname}/src/`
      }
    },
    'gatsby-plugin-sharp',
    {
      reslove: 'gatsby-transformer-remark',
      options:{
        plugins:[
          'gatsby-remark-relative-images',
          {
            resolve:'gatsby-remark-images',
            options:{
              maxWidth:750,
              linkImagesToOriginal: false
            }
          }
        ]
      }
    }
  ]
}

请帮忙!先感谢您。

4

1 回答 1

0

正如文档所解释的,您必须在您的 中添加以下代码段gatsby-node.js

const { fmImagesToRelative } = require('gatsby-remark-relative-images');

exports.onCreateNode = ({ node }) => {
  fmImagesToRelative(node);
};

这将获取 gatsby-source 插件返回的每个节点,如果找到匹配的文件,则将 markdown frontmatter 数据中的任何绝对路径转换为相对路径。

于 2020-08-13T15:01:22.670 回答