Gatsby 入门博客图片未加载

Question

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

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

Markdown文件图片调用

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

这里我正在尝试图像是否需要与 markdown 文件位于同一文件夹中，或者与页面模板位于同一文件夹中 - 两者都不起作用。

文件

Gatsby 配置

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 设置一个足够高的值，以防您无法 trim 缩小图像

Answer 2

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

了解是否有自动缩小图像以适应最大宽度的方法会很有帮助。

Gatsby 入门博客图片未加载

Gatsby Starter Blog images not loading

markdown

reactjs

gatsby

gatsby-image