你如何在 Netlify 上发布带有 gatsby-image 的 gatsby 项目？

IT技术 reactjs graphql gatsby netlify gatsby-image
2021-05-15 07:49:27

所以我可以在本地构建我的 gatsby 项目没问题，但是当 Netlify 尝试构建时，我收到错误

Field "featuredImage" must not have a selection since type "String" has no subfields.
5:34:38 PM: This can happen if you e.g. accidentally added { } to the field "featuredImage". If you didn't expect "featuredImage" to be of type "String" make sure that your input source and/or plugin is correct.
5:34:38 PM: error There was an error in your GraphQL query:
5:34:38 PM: Field "featuredImage" must not have a selection since type "String" has no subfields.
5:34:38 PM: This can happen if you e.g. accidentally added { } to the field "featuredImage". If you didn't expect "featuredImage" to be of type "String" make sure that your input source and/or plugin is correct.
5:34:38 PM: error There was an error in your GraphQL query:
5:34:38 PM: Field "featuredImage" must not have a selection since type "String" has no subfields.
5:34:38 PM: This can happen if you e.g. accidentally added { } to the field "featuredImage". If you didn't expect "featuredImage" to be of type "String" make sure that your input source and/or plugin is correct.
5:34:38 PM: failed extract queries from components - 0.439s

这基本上只是告诉我我需要在生产模式下构建才能看到完整的错误，对吗？生产模式很好，因为那是在我的本地计算机上。

我使用的gatsby-image和gatsby-background-image我听到的可能会导致问题？我尝试添加gatsby-remark-relative-images并按照此博客文章中的说明进行操作，但仍然遇到相同的错误

我还为 node 版本添加了一个环境变量，它什么也没做，但我在Netlify 和 Gatsby 的“循序渐进”指南中读到它可能有用

在此处输入图片说明

这是 Netlify 给我的整个控制台日志

显示代码片段

gatsby-node.js

显示代码片段

降价模板

显示代码片段

只需询问您是否要查看任何特定文件

1个回答

要使用 Netlify+Gatsby 管理图像，您需要安装gatsby-remark-relative-images插件。这是因为需要查询放在目录外的图片（一般assets放在/assets文件夹下）。

从它的文档：

将 Markdown 中的图像 src(s) 转换为相对于其节点的父目录。这将有助于 gatsby-remark-images 匹配节点文件夹外的图像。例如，与 NetlifyCMS 一起使用。

注意：这是为与 NetlifyCMS 一起使用而构建的，在支持相对路径之前，应将其视为临时解决方案。如果它适用于其他用例，那就太好了！

然后，在您的 中gatsby-node.js，您需要放置以下代码段：

const { fmImagesToRelative } = require('gatsby-remark-relative-images');

exports.onCreateNode = ({ node }) => {
  fmImagesToRelative(node);
};

gatsby-source如果找到匹配的文件，这会获取插件返回的每个节点，并将 markdown frontmatter 数据中的任何绝对路径转换为相对路径。

下一步是在 gatsby-config.js 中进行设置。遵循结构很重要，将您的转换器注释插件放在后面gatsby-source-filesystem以避免它们覆盖它。

 // gatsby-source-filesystem options here
 {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        // gatsby-remark-relative-images must
        // go before gatsby-remark-images
        {
          resolve: `gatsby-remark-relative-images`,
        },
        {
          resolve: `gatsby-remark-images`,
          options: {
            // It's important to specify the maxWidth (in pixels) of
            // the content container as this plugin uses this as the
            // base for generating different widths of each image.
            maxWidth: 590,
          },
        },
      ],
    },

您的问题中未提供的最后一步是在您的 , 中设置上传和图像的路径config.yml，应如下所示：

media_folder: static/assets/images
public_folder: /assets/images

在 Gatsby 中，media_folder必须在/static路径下设置才能被 React 及其组件访问。所以，记住media_folder路径，你的public_folder路径必须相应地设置。来自Netlify Gatsby 文档。

仍然在根目录下，添加一个“static”文件夹。Gatsby 会将 static 文件夹中的所有内容复制到输出中，因此我们要将 Netlify CMS 配置文件放置为 static/admin/config.yml。

其它你可能感兴趣的问题
上一篇为什么我不能在 ReactJS 中 flexbox 某些元素？ 下一篇类型错误：无法读取 null 的属性“getBoundingClientRect”