Gatsby Starter 博客图片未加载答案

【问题标题】：Gatsby Starter Blog images not loadingGatsby Starter 博客图片未加载
【发布时间】：2020-08-11 22:58:54
【问题描述】：

我正在使用 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`,
        ],
      },
    },

结果

【问题讨论】：

运行 build 后，能否查看图片是否发送到各自的文件夹？

标签： reactjs markdown gatsby gatsby-image

【解决方案1】：

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

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

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

查看documentation了解更多信息

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

并使用相对路径

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

【讨论】：

不幸的是，这并没有解决它：/
任何改变都是图像宽度大于1000px。否则它应该像![links1](./links1.jpg)
我认为是的，我可以设置一个无限的宽度吗？
我认为您可以设置一个足够大的最大宽度来容纳您的图像。但是 maxWidth 是一个必需的值，插件会根据它进行大量计算

【解决方案2】：

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

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

【讨论】：