Question

我正在努力添加图像来标记gatsby v2网站的markdown帖子。我的网站编译时没有任何投诉，并且存在我的markdown文件中的所有文本内容。但是，图像损坏。我已经放弃了认为的关键配置。我在做什么错了？

这是我的文件结构：

src - *
      | posts - *
                | post_1 - *
                           | image.png
                           | index.md

这是我的插件-我已将gatsby-transformer-remark设置为使用gatsby-remark-images。

plugins: [
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-offline',
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`
      }
    },
    {
      resolve: 'gatsby-plugin-react-svg',
      options: {
          rule: {
            include: /.svg/
          }
      }
    },
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
            },
          },
        ],
      },
    }
  ]

这是我尝试在index.md中调用图像的方式：

![My Image](image.png)

最后是gatsby-node.js：

const { createFilePath } = require(`gatsby-source-filesystem`)
const path = require('path')

exports.onCreateNode = ({ node, getNode, actions: {createNodeField} }) => {
  if (node.internal.type === `MarkdownRemark`) {
    const slug = createFilePath({ node, getNode, basePath: `posts` })
    createNodeField({
      node,
      name: `slug`,
      value: slug
    })
  }
}

exports.createPages = async ({ graphql, actions: {createPage} }) => {
  const result = await graphql(`
    {
      allMarkdownRemark {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
    }
  `)
  console.log(result)
  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
    createPage({
      path: node.fields.slug,
      component: path.resolve('./src/templates/blog-post.js'),
      context: {
        slug: node.fields.slug
      }
    })
  })
}

Answer 1

事实证明，该问题在我使用的gatsby版本与我使用的gatsby插件版本之间不兼容。我当时使用的是v2 gatsby行，但仍在package.json中使用v1插件

在带有注释的Gatsby.js中使用图像

1 个答案: