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

【问题标题】：Using images in Gatsby.js with remark在 Gatsby.js 中使用带有注释的图像
【发布时间】：2018-12-11 12:52:20
【问题描述】：

我正在努力为 gatsby v2 网站添加图片来评论降价帖子。我的网站可以毫无怨言地编译，并且我的 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
      }
    })
  })
}

【问题讨论】：

标签： gatsby

【解决方案1】：

这个问题原来是我使用的gatsby 版本和我使用的 gatsby 插件版本不兼容。我在 v2 gatsby 行，但仍在我的 package.json 中使用 v1 插件

【讨论】：

我也有同样的问题，但是查看插件 ` "gatsby-transformer-sharp": "^2.2.15",` 似乎是针对 2.0 的？
` "gatsby-remark-copy-linked-files": "^2.1.19", "gatsby-remark-images": "^3.1.22", `
据我所知，插件的版本独立于主要的 gatsby 项目，所以仅仅因为它是 2.x.x 并不一定意味着它是为 gatsby v2 构建的。