Gatsby入门博客图片未加载

Question

我正在使用gatsby初学者博客模板创建一个个人博客。我已经做了一些修改，以增强一些功能，虽然我没有做任何改变的图像处理。

尽管如此，当createPage从标记文件构建日志时，图像似乎并不呈现在页面上。

标记文件映像调用

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

在这里，我正在测试图像是否需要与标记文件相同的文件夹，或者与页面模板相同的文件夹--两者都不起作用。

文件

​

​

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

由于标记和图像都位于同一个目录中，所以您可以简单地指定如下所示的图像

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

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

查看documentation以获得更多信息

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

并使用相对路径

还要确保图像的最大大小不超过maxWidth，否则图像不会加载。您可以为maxWidth设置一个足够高的值，以防您无法减少图像。

Answer 2

正如Shubham所指出的，问题在于图像太大。一旦他们的宽度向下，他们可以显示在屏幕上。

这将有助于了解是否有一种方法，以自动缩小图像，以适应最大宽度。