Reactjs 盖茨比评论图像是偶尔链接图像

Reactjs 盖茨比评论图像是偶尔链接图像,reactjs,image,frontend,gatsby,Reactjs,Image,Frontend,Gatsby,我的文件结构如下: src - images - - blog-images - - - (various png and jpg files) - pages - - blog - - - (various .md files) 我通过模板成功创建了博客页面。我不知道如何使这些图像出现。我已经包括了盖茨比评论图片,并由gatsby-config.js修改为如下所示: plugins: [ `gatsby-plugin-react-helmet`, { resolv

我的文件结构如下:

src
- images
- - blog-images
- - - (various png and jpg files)
- pages
- - blog
- - - (various .md files)
我通过模板成功创建了博客页面。我不知道如何使这些图像出现。我已经包括了盖茨比评论图片,并由gatsby-config.js修改为如下所示:

plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `blogImages`,
        path: `${__dirname}/src/images/blog-images`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `blog`,
        path: `${__dirname}/src/pages`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/Favicon.png`, // This path is relative to the root of the site.
      },
    },
    `gatsby-plugin-sass`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      }
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1200
            }
          }
        ]
      }
    },
偶尔,当我将图像从blog images文件夹移动到images或pages/blog文件夹时,图像会显示出来。但是,当我试图调整它或者通过移动它在页面上获得第二个图像时,它停止了工作。我撤销了破坏图像的内容,图像就不会回来了


我已经试着跟随和,但我还没有更进一步地理解我做错了什么。

发布后不久,我发现了这一点

我试图通过
[alt](./filename.png)
[alt](./blog images/filename.png)
引用该图像。最后,我引用了post,而不是以图像为中心的gatsby源文件系统配置


有效的方法是
[alt](../../images/blog images/filename.png)

在发布后不久,我就明白了

我试图通过
[alt](./filename.png)
[alt](./blog images/filename.png)
引用该图像。最后,我引用了post,而不是以图像为中心的gatsby源文件系统配置

起作用的是
[alt](../../images/blog-images/filename.png)