Question

我的文件结构如下：

src
- images
- - blog-images
- - - (various png and jpg files)
- pages
- - blog
- - - (various .md files)

我通过模板成功创建了博客页面。我不知道如何使这些图像出现。我包含了gatsby-remark-images并由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文件夹移至图像或pages / blog文件夹时，图像会显示出来。但是，然后我尝试对其进行调整，或者通过移动它来使页面上的第二张图像正常工作，并且该图像停止工作。我撤消了破坏图像的事情，并且它没有回来。

我已经尝试遵循this post和this one，但是我离了解自己做错的事情还很近。

Answer 1

发布后的片刻，我知道了。

我试图通过[alt](./filename.png)或[alt](./blog-images/filename.png)引用图像。我最终相对于帖子引用了它，而不是任何以图像为中心的gatsby-source-filesystem配置。

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

Gatsby备注图像偶尔会链接图像

1 个答案: