Question

我正在使用gatsby入门博客模板创建个人博客。尽管没有对图像处理进行任何更改，但我已经进行了一些修改以增强一些功能。

话虽如此，当createPage从markdown文件构造日志帖子时，图像似乎没有在页面上呈现。

Markdown文件图像调用

![linksx](./links.jpg) ![links1](../pages/roam-research-intro/links1.jpg)

在这里，我正在尝试确定图像是否需要与Markdown文件位于同一文件夹中，或者与页面模板位于同一文件夹中-均无效。

文件

盖茨比配置

plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/pages`,
        name: `blog`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/assets`,
        name: `assets`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1000,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          `gatsby-remark-prismjs`,
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`,
        ],
      },
    },

结果

Answer 1

由于markdown和图片都在同一目录中，因此您只需指定以下图片即可

![linksx](./links.jpg)
![links1](./links1.jpg)

如果它们位于不同的目录中，则需要配置gatsby-source-filesystem

检查documentation以获得更多信息

{
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/images`,
      },
    },

并使用相对路径

还要确保图像的最大尺寸不超过maxWidth，否则图像将不会加载。您可以为maxWidth设置足够高的值，以防无法修剪图像

Answer 2

正如Shubham指出的那样，问题出在图像太大。缩小宽度后，它们可以显示在屏幕上。

了解是否有一种方法可以自动缩小图像以适合最大宽度。

Gatsby Starter Blog图像未加载

2 个答案: