reactjs - Gatsby Starter 博客图片未加载

Question

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

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

Markdown 文件图片调用

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

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

文件

盖茨比配置

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 所指出的，问题在于图像太大。一旦将它们的宽度缩小，它们就可以显示在屏幕上。

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