你如何在 Netlify 上发布带有 gatsby-image 的 gatsby 项目? [英] How do you publish a gatsby project with gatsby-image on Netlify?
本文介绍了你如何在 Netlify 上发布带有 gatsby-image 的 gatsby 项目?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我可以在本地构建我的 gatsby 项目没问题，但是当 Netlify 尝试构建时，我收到错误
featuredImage"字段不能有选择，因为String"类型没有子字段.下午 5:34:38:如果您例如意外地将 { } 添加到featuredImage"字段中.如果您不希望featuredImage"是String"类型，请确保您的输入源和/或插件是正确的.下午 5:34:38:错误 您的 GraphQL 查询中出现错误:下午 5:34:38:featuredImage"字段不能有选择，因为String"类型没有子字段.下午 5:34:38:如果您例如意外地将 { } 添加到featuredImage"字段中.如果您不希望featuredImage"是String"类型，请确保您的输入源和/或插件是正确的.下午 5:34:38:错误 您的 GraphQL 查询中出现错误:下午 5:34:38:featuredImage"字段不能有选择，因为String"类型没有子字段.下午 5:34:38:如果您例如意外地将 { } 添加到featuredImage"字段中.如果您不希望featuredImage"是String"类型，请确保您的输入源和/或插件是正确的.下午 5:34:38:从组件中提取查询失败 - 0.439 秒这本质上只是告诉我我需要在生产模式下构建才能看到完整的错误，对吗?生产模式很好，因为那是在我的本地计算机上.
我正在使用 gatsby-image 和 gatsby-background-image 我听说这可能会导致问题?我尝试添加
这是 Netlify 给我的整个控制台日志
下午 5:33:23:构建准备开始下午 5:33:25:构建映像版本:30f629161c0736b1a3ecd8b418e5eeffab5c0faf下午 5:33:25:构建镜像标签:v3.3.14下午 5:33:25:构建机器人版本:c59536cd5af8d84bd2f02c6af4027561b250018a下午 5:33:25:获取缓存的依赖项5:33:25 PM:开始下载 254.9KB 的缓存下午 5:33:25:在 71.841033 毫秒内完成下载缓存5:33:25 PM:开始提取缓存下午 5:33:25:无法获取缓存，继续构建下午 5:33:25:开始为构建准备存储库下午 5:33:25:未找到缓存的依赖项.克隆新的 repo下午 5:33:25:git clone https://github.com/samgermain/sudSaskV2下午 5:33:28:准备 Git 参考 refs/heads/master下午 5:33:28:启动构建脚本下午 5:33:28:安装依赖项下午 5:33:29:下载并安装节点 v14.3.0...下午 5:33:30:下载 https://nodejs.org/dist/v14.3.0/node-v14.3.0-linux-x64.tar.xz...下午 5:33:30:使用 sha256sum 计算校验和下午 5:33:30:校验和匹配！下午 5:33:33:现在使用节点 v14.3.0 (npm v6.14.5)下午 5:33:33:开始恢复缓存的构建插件下午 5:33:33:完成恢复缓存的构建插件下午 5:33:34:尝试使用 ruby 版本 2.6.2，从环境中读取下午 5:33:35:使用 ruby 版本 2.6.2下午 5:33:35:使用 PHP 5.6 版下午 5:33:35:5.2 已经安装.下午 5:33:35:使用 Swift 5.2 版下午 5:33:35:开始恢复缓存的节点模块下午 5:33:35:完成恢复缓存节点模块下午 5:33:35:使用 NPM 版本 6.14.5 安装 NPM 模块下午 5:34:18:>sharp@0.25.3 安装/opt/build/repo/node_modules/sharp下午 5:34:18:>(node install/libvips && node install/dll-copy && prebuild-install --runtime=napi) ||(node-gyp 重建 && 节点安装/dll-copy)下午 5:34:19:信息下午 5:34:19:尖锐下午 5:34:19:下载 https://github.com/lovell/sharp-libvips/releases/download/v8.9.1/libvips-8.9.1-linux-x64.tar.gz下午 5:34:21:>node-sass@4.14.1 安装/opt/build/repo/node_modules/node-sass下午 5:34:21:>节点脚本/install.js下午 5:34:21:从 https://github.com/sass/node-sass/releases/download/v4.14.1/linux-x64-83_binding.node 下载二进制文件下午 5:34:22:下载完成下午 5:34:22:二进制文件保存到/opt/build/repo/node_modules/node-sass/vendor/linux-x64-83/binding.node下午 5:34:22:将二进制缓存到/opt/buildhome/.npm/node-sass/4.14.1/linux-x64-83_binding.node下午 5:34:22:>core-js@2.6.11 postinstall/opt/build/repo/node_modules/@babel/polyfill/node_modules/core-js下午 5:34:22:>node -e "try{require('./postinstall')}catch(e){}"下午 5:34:22:感谢您使用 core-js ( https://github.com/zloirock/core-js ) 来填充 JavaScript 标准库！下午 5:34:22:该项目需要您的帮助！请考虑在 Open Collective 或 Patreon 上支持 core-js:下午 5:34:22:>https://opencollective.com/core-js下午 5:34:22:>https://www.patreon.com/zloirock下午 5:34:22:另外，core-js 的作者 (https://github.com/zloirock) 正在寻找一份好工作 -)下午 5:34:22:>core-js@2.6.11 postinstall/opt/build/repo/node_modules/babel-polyfill/node_modules/core-js下午 5:34:22:>node -e "try{require('./postinstall')}catch(e){}"下午 5:34:22:>core-js@2.6.11 postinstall/opt/build/repo/node_modules/babel-runtime/node_modules/core-js下午 5:34:22:>node -e "try{require('./postinstall')}catch(e){}"下午 5:34:22:>core-js@3.6.5 postinstall/opt/build/repo/node_modules/core-js下午 5:34:22:>node -e "try{require('./postinstall')}catch(e){}"下午 5:34:22:>core-js-pure@3.6.5 postinstall/opt/build/repo/node_modules/core-js-pure下午 5:34:22:>node -e "try{require('./postinstall')}catch(e){}"下午 5:34:23:>core-js@2.6.11 postinstall/opt/build/repo/node_modules/gatsby/node_modules/core-js下午 5:34:23:>node -e "try{require('./postinstall')}catch(e){}"下午 5:34:24:>gatsby-telemetry@1.3.9 postinstall/opt/build/repo/node_modules/gatsby-telemetry下午 5:34:24:>节点 src/postinstall.js ||真的下午 5:34:24:>cwebp-bin@5.1.0 postinstall/opt/build/repo/node_modules/cwebp-bin下午 5:34:24:>节点库/install.js下午 5:34:25:✔ cwebp 预构建测试成功通过下午 5:34:25:>mozjpeg@6.0.1 postinstall/opt/build/repo/node_modules/mozjpeg下午 5:34:25:>节点库/install.js下午 5:34:25:✔ mozjpeg 预构建测试成功通过下午 5:34:25:>pngquant-bin@5.0.2 安装后/opt/build/repo/node_modules/pngquant-bin下午 5:34:25:>节点库/install.js下午 5:34:26:✔ pngquant 预构建测试成功通过下午 5:34:26:>gatsby-cli@2.12.36 postinstall/opt/build/repo/node_modules/gatsby/node_modules/gatsby-cli下午 5:34:26:>节点脚本/postinstall.js下午 5:34:26:>gatsby@2.22.11 postinstall/opt/build/repo/node_modules/gatsby下午 5:34:26:>节点脚本/postinstall.js下午 5:34:26:>node-sass@4.14.1 postinstall/opt/build/repo/node_modules/node-sass下午 5:34:26:>节点脚本/build.js下午 5:34:26:在/opt/build/repo/node_modules/node-sass/vendor/linux-x64-83/binding.node 找到二进制文件下午 5:34:26:测试二进制文件下午 5:34:27:二进制很好下午 5:34:29:npm 警告可选跳过可选依赖:fsevents@1.2.13 (node_modules/fsevents):下午 5:34:29:npm 警告 notsup 跳过可选依赖项:fsevents@1.2.13 不受支持的平台:想要 {"os":"darwin","arch":"any"}(当前:{"os":"linux","arch":"x64"})下午 5:34:29:npm 警告下午 5:34:29:可选的跳过可选依赖:fsevents@2.1.3 (node_modules/chokidar/node_modules/fsevents):下午 5:34:29:npm 警告 notsup 跳过可选依赖项:fsevents@2.1.3 不受支持的平台:想要 {"os":"darwin","arch":"any"}(当前:{"os":"linux","arch":"x64"})下午 5:34:29:添加了 1321 个贡献者的 2392 个包，并在 53.15 秒内审核了 2401 个包下午 5:34:32:155 个包裹正在寻找资金下午 5:34:32:运行npm fund"了解详情下午 5:34:32:发现 0 个漏洞下午 5:34:32:安装 NPM 模块下午 5:34:32:开始恢复缓存的 Go 缓存下午 5:34:32:完成恢复缓存的 go 缓存下午 5:34:32:go 版本 go1.12 linux/amd64下午 5:34:32:go 版本 go1.12 linux/amd64下午 5:34:32:安装缺少的命令下午 5:34:32:验证运行目录下午 5:34:32:执行用户命令:gatsby build下午 5:34:35:成功打开并验证 gatsby-configs - 0.060s下午 5:34:36:成功加载插件 - 1.351 秒下午 5:34:36:成功 onPreInit - 0.015s下午 5:34:36:成功从以前的版本中删除 html 和 css 文件 - 0.025s下午 5:34:36:成功初始化缓存 - 0.008s下午 5:34:36:成功复制 gatsby 文件 - 0.044s下午 5:34:36:PreBootstrap 成功 - 0.008s下午 5:34:36:成功 createSchemaCustomization - 0.013s下午 5:34:37:成功源和转换节点 - 0.285s下午 5:34:37:成功构建架构 - 0.463s下午 5:34:37:成功 createPages - 0.050s下午 5:34:37:成功 createPagesStatefully - 0.095s下午 5:34:37:成功 onPreExtractQueries - 0.000s下午 5:34:37:成功更新架构 - 0.031 秒下午 5:34:38:错误 您的 GraphQL 查询中出现错误:下午 5:34:38:featuredImage"字段不能有选择，因为String"类型没有子字段.下午 5:34:38:如果您例如意外地将 { } 添加到featuredImage"字段中.如果您不希望featuredImage"是String"类型，请确保您的输入源和/或插件是正确的.下午 5:34:38:错误 您的 GraphQL 查询中出现错误:下午 5:34:38:featuredImage"字段不能有选择，因为String"类型没有子字段.下午 5:34:38:如果您例如意外地将 { } 添加到featuredImage"字段中.如果您不希望featuredImage"是String"类型，请确保您的输入源和/或插件是正确的.下午 5:34:38:错误 您的 GraphQL 查询中出现错误:下午 5:34:38:featuredImage"字段不能有选择，因为String"类型没有子字段.下午 5:34:38:如果您例如意外地将 { } 添加到featuredImage"字段中.如果您不希望featuredImage"是String"类型，请确保您的输入源和/或插件是正确的.下午 5:34:38:从组件中提取查询失败 - 0.439 秒5:34:38 PM:跳过功能准备步骤:未设置功能目录下午 5:34:38:缓存工件5:34:38 PM:开始保存节点模块5:34:38 PM:完成保存节点模块5:34:38 PM:开始保存构建插件下午 5:34:38:完成保存构建插件下午 5:34:38:开始保存 pip 缓存下午 5:34:44:完成保存 pip 缓存下午 5:34:44:开始保存 emacs cask 依赖项下午 5:34:44:完成保存 emacs cask 依赖项下午 5:34:44:开始保存 Maven 依赖项下午 5:34:44:完成保存 Maven 依赖项下午 5:34:44:开始保存启动依赖项下午 5:34:44:完成保存启动依赖项下午 5:34:44:开始保存 go 依赖项下午 5:34:44:完成保存 go 依赖项下午 5:34:47:运行命令时出错:构建脚本返回非零退出代码:1下午 5:34:47:构建站点"阶段失败:构建脚本返回非零退出代码:1下午 5:34:47:构建失败:无法构建站点下午 5:34:50:在 1m25.525936502s 内完成处理构建请求gatsby-node.js
const { createFilePath } = require(`gatsby-source-filesystem`)const { fmImagesToRelative } = require('gatsby-remark-relative-images');const path = require("路径")const replacePath = 路径 =>(path === `/` ? path : path.replace(//$/, ``))export.createPages = async ({ actions: { createPage }, graphql }) =>{const postTemplate = path.resolve(`src/components/Article/index.tsx`)const 结果 = 等待 graphql(`{allMarkdown备注(排序:{ 顺序:DESC，字段:[frontmatter___date]}){边{节点{字段{蛞蝓}}}}}`)如果(结果.错误){返回 Promise.reject(result.errors)}result.data.allMarkdownRemark.edges.forEach(({ node }) => {创建页面({路径:replacePath(node.fields.slug),组件:postTemplate，})})}export.onCreateNode = ({ node, getNode, actions }) =>{fmImagesToRelative(节点)if (node.internal.type === `MarkdownRemark`)actions.createNodeField({节点，名称:`slug`，值:replacePath(createFilePath({ node, getNode, basePath: `pages` })),})}Markdown 模板
const ShareButtons = ({siteUrl, shareImageUrl, title, description} : {siteUrl : string, shareImageUrl : string, title : string, description : string}) =>{const butCls='m-1'返回 (<Facebook 分享按钮类名={butCls}网址={网站网址}><FontAwesomeIcon icon={faFacebook}/></FacebookShareButton><推特分享按钮类名={butCls}网址={网站网址}标题={标题}><FontAwesomeIcon icon={faTwitter}/></TwitterShareButton>)}const 文章横幅 = ({title, author, category, date, siteUrl, shareImageUrl, description } :{标题:字符串，作者:字符串，类别:字符串，日期:字符串，siteUrl:字符串，shareImageUrl:字符串，描述:字符串}) =>(<div><h5>{category}</h5><h1>{title}</h1><small><p>{author} • {date}</p></small><分享按钮{...{siteUrl、shareImageUrl、标题、描述}}/>
)const 文章 = ({ data }: { data: IPostRequest }) =>{//帮助组织请求中的有用数据常量{降价备注:{字段:{蛞蝓},前言:{特色图片，//覆盖，标题，字幕，作者，描述，类别，日期，},html,},地点: {站点元数据:{领域}}} = 数据const siteUrl = `${domain}${slug}`const shareImageUrl = `${domain}${featuredImage.childImageSharp.fluid.src}`//忽略这个错误const 元数据:文章元数据 = {作者，描述，标题:`${title} |${subTitle}`，网址，分享图片网址}返回 (<布局 siteMetadata={metadata} title={title}><Row className='w-100'><Col xs={2}></Col><Col xs={8}><文章横幅{...{title, author, category, date, siteUrl, shareImageUrl, description}}/>{/* <CoverImg/>*/}<div id="article-content" risklySetInnerHTML={{ __html: html }}/></Col><Col md={3}></Col></行></布局>)}导出默认文章导出 const pageQuery = graphql`查询($path:字符串！){allMarkdown备注(限制:4排序:{ 顺序:DESC，字段:[frontmatter___date]}){边{节点{阅读时间摘录(修剪长度:100)字段{蛞蝓}前言{标题日期(格式字符串:MMMM DD，YYYY")}}}}markdownRemark(fields: { slug: { eq: $path } }) {字段{蛞蝓}摘抄html前言{标题字幕日期(格式字符串:MMMM DD，YYYY hh:mm a")作者类别描述特色图片 {childImageSharp {体液 {源文件源集尺寸纵横比}}}}}地点{站点元数据{领域}}作者图片:文件(相对路径:{ eq:author.jpg"}){childImageSharp {固定(宽度:40，高度:40){... GatsbyImageSharpFixed}}}}`
只需询问您是否想查看任何特定文件
解决方案
要使用 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');export.onCreateNode = ({ node }) =>{fmImagesToRelative(节点)；};这会获取您的 gatsby-source 插件返回的每个节点，并在找到匹配文件时将 Markdown frontmatter 数据中的任何绝对路径转换为相对路径.
下一步是在 gatsby-config.js 中进行设置.遵循结构很重要，将您的转换器注释插件放在 gatsby-source-filesystem 之后以避免它们覆盖它.
//gatsby-source-filesystem 选项在这里{解析:`gatsby-transformer-remark`，选项: {插件: [//gatsby-remark-relative-images 必须//在 gatsby-remark-images 之前{解析:`gatsby-remark-relative-images`，},{解析:`gatsby-remark-images`，选项: {//指定 maxWidth(以像素为单位)很重要//作为这个插件的内容容器使用 this 作为//生成每个图像不同宽度的基础.最大宽度:590，},},],},您的问题中未提供的最后一步是在您的 config.yml 中设置上传和图像的路径，应如下所示:
media_folder:静态/资产/图像公共文件夹:/资产/图像在 Gatsby 中，media_folder 必须设置在 /static 路径下才能被 React 及其组件访问.因此，请记住 media_folder 路径，必须相应地设置您的 public_folder 路径.来自 Netlify Gatsby 文档.
仍然在根目录下，添加一个static"文件夹.盖茨比会复制将静态文件夹中的所有内容都放入输出中，因此我们需要将 Netlify CMS 配置文件放置为 static/admin/config.yml.
So I can locally build my gatsby project no problem, but when Netlify tries to build, I get the error
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
Which is essentially just telling me I need to build in production mode to see the full error right? Production mode is fine because that's on my local computer.
I am using gatsby-image and gatsby-background-image which i hear might cause problems? I tried adding gatsby-remark-relative-images and followed the instructions on this blog post but am still getting the same errors
I also added an environment variable for the node version which did nothing, but i read it might be useful in this "Step by Step" guide for Netlify and Gatsby
Here's the whole console log that Netlify gives me
5:33:23 PM: Build ready to start
5:33:25 PM: build-image version: 30f629161c0736b1a3ecd8b418e5eeffab5c0faf
5:33:25 PM: build-image tag: v3.3.14
5:33:25 PM: buildbot version: c59536cd5af8d84bd2f02c6af4027561b250018a
5:33:25 PM: Fetching cached dependencies
5:33:25 PM: Starting to download cache of 254.9KB
5:33:25 PM: Finished downloading cache in 71.841033ms
5:33:25 PM: Starting to extract cache
5:33:25 PM: Failed to fetch cache, continuing with build
5:33:25 PM: Starting to prepare the repo for build
5:33:25 PM: No cached dependencies found. Cloning fresh repo
5:33:25 PM: git clone https://github.com/samgermain/sudSaskV2
5:33:28 PM: Preparing Git Reference refs/heads/master
5:33:28 PM: Starting build script
5:33:28 PM: Installing dependencies
5:33:29 PM: Downloading and installing node v14.3.0...
5:33:30 PM: Downloading https://nodejs.org/dist/v14.3.0/node-v14.3.0-linux-x64.tar.xz...
5:33:30 PM: Computing checksum with sha256sum
5:33:30 PM: Checksums matched!
5:33:33 PM: Now using node v14.3.0 (npm v6.14.5)
5:33:33 PM: Started restoring cached build plugins
5:33:33 PM: Finished restoring cached build plugins
5:33:34 PM: Attempting ruby version 2.6.2, read from environment
5:33:35 PM: Using ruby version 2.6.2
5:33:35 PM: Using PHP version 5.6
5:33:35 PM: 5.2 is already installed.
5:33:35 PM: Using Swift version 5.2
5:33:35 PM: Started restoring cached node modules
5:33:35 PM: Finished restoring cached node modules
5:33:35 PM: Installing NPM modules using NPM version 6.14.5
5:34:18 PM: > sharp@0.25.3 install /opt/build/repo/node_modules/sharp
5:34:18 PM: > (node install/libvips && node install/dll-copy && prebuild-install --runtime=napi) || (node-gyp rebuild && node install/dll-copy)
5:34:19 PM: info
5:34:19 PM: sharp
5:34:19 PM: Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.9.1/libvips-8.9.1-linux-x64.tar.gz
5:34:21 PM: > node-sass@4.14.1 install /opt/build/repo/node_modules/node-sass
5:34:21 PM: > node scripts/install.js
5:34:21 PM: Downloading binary from https://github.com/sass/node-sass/releases/download/v4.14.1/linux-x64-83_binding.node
5:34:22 PM: Download complete
5:34:22 PM: Binary saved to /opt/build/repo/node_modules/node-sass/vendor/linux-x64-83/binding.node
5:34:22 PM: Caching binary to /opt/buildhome/.npm/node-sass/4.14.1/linux-x64-83_binding.node
5:34:22 PM: > core-js@2.6.11 postinstall /opt/build/repo/node_modules/@babel/polyfill/node_modules/core-js
5:34:22 PM: > node -e "try{require('./postinstall')}catch(e){}"
5:34:22 PM: Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
5:34:22 PM: The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
5:34:22 PM: > https://opencollective.com/core-js
5:34:22 PM: > https://www.patreon.com/zloirock
5:34:22 PM: Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
5:34:22 PM: > core-js@2.6.11 postinstall /opt/build/repo/node_modules/babel-polyfill/node_modules/core-js
5:34:22 PM: > node -e "try{require('./postinstall')}catch(e){}"
5:34:22 PM: > core-js@2.6.11 postinstall /opt/build/repo/node_modules/babel-runtime/node_modules/core-js
5:34:22 PM: > node -e "try{require('./postinstall')}catch(e){}"
5:34:22 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/core-js
5:34:22 PM: > node -e "try{require('./postinstall')}catch(e){}"
5:34:22 PM: > core-js-pure@3.6.5 postinstall /opt/build/repo/node_modules/core-js-pure
5:34:22 PM: > node -e "try{require('./postinstall')}catch(e){}"
5:34:23 PM: > core-js@2.6.11 postinstall /opt/build/repo/node_modules/gatsby/node_modules/core-js
5:34:23 PM: > node -e "try{require('./postinstall')}catch(e){}"
5:34:24 PM: > gatsby-telemetry@1.3.9 postinstall /opt/build/repo/node_modules/gatsby-telemetry
5:34:24 PM: > node src/postinstall.js || true
5:34:24 PM: > cwebp-bin@5.1.0 postinstall /opt/build/repo/node_modules/cwebp-bin
5:34:24 PM: > node lib/install.js
5:34:25 PM: ✔ cwebp pre-build test passed successfully
5:34:25 PM: > mozjpeg@6.0.1 postinstall /opt/build/repo/node_modules/mozjpeg
5:34:25 PM: > node lib/install.js
5:34:25 PM: ✔ mozjpeg pre-build test passed successfully
5:34:25 PM: > pngquant-bin@5.0.2 postinstall /opt/build/repo/node_modules/pngquant-bin
5:34:25 PM: > node lib/install.js
5:34:26 PM: ✔ pngquant pre-build test passed successfully
5:34:26 PM: > gatsby-cli@2.12.36 postinstall /opt/build/repo/node_modules/gatsby/node_modules/gatsby-cli
5:34:26 PM: > node scripts/postinstall.js
5:34:26 PM: > gatsby@2.22.11 postinstall /opt/build/repo/node_modules/gatsby
5:34:26 PM: > node scripts/postinstall.js
5:34:26 PM: > node-sass@4.14.1 postinstall /opt/build/repo/node_modules/node-sass
5:34:26 PM: > node scripts/build.js
5:34:26 PM: Binary found at /opt/build/repo/node_modules/node-sass/vendor/linux-x64-83/binding.node
5:34:26 PM: Testing binary
5:34:27 PM: Binary is fine
5:34:29 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/fsevents):
5:34:29 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
5:34:29 PM: npm WARN
5:34:29 PM: optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules/chokidar/node_modules/fsevents):
5:34:29 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
5:34:29 PM: added 2392 packages from 1321 contributors and audited 2401 packages in 53.15s
5:34:32 PM: 155 packages are looking for funding
5:34:32 PM: run `npm fund` for details
5:34:32 PM: found 0 vulnerabilities
5:34:32 PM: NPM modules installed
5:34:32 PM: Started restoring cached go cache
5:34:32 PM: Finished restoring cached go cache
5:34:32 PM: go version go1.12 linux/amd64
5:34:32 PM: go version go1.12 linux/amd64
5:34:32 PM: Installing missing commands
5:34:32 PM: Verify run directory
5:34:32 PM: Executing user command: gatsby build
5:34:35 PM: success open and validate gatsby-configs - 0.060s
5:34:36 PM: success load plugins - 1.351s
5:34:36 PM: success onPreInit - 0.015s
5:34:36 PM: success delete html and css files from previous builds - 0.025s
5:34:36 PM: success initialize cache - 0.008s
5:34:36 PM: success copy gatsby files - 0.044s
5:34:36 PM: success onPreBootstrap - 0.008s
5:34:36 PM: success createSchemaCustomization - 0.013s
5:34:37 PM: success source and transform nodes - 0.285s
5:34:37 PM: success building schema - 0.463s
5:34:37 PM: success createPages - 0.050s
5:34:37 PM: success createPagesStatefully - 0.095s
5:34:37 PM: success onPreExtractQueries - 0.000s
5:34:37 PM: success update schema - 0.031s
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: 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
5:34:38 PM: Skipping functions preparation step: no functions directory set
5:34:38 PM: Caching artifacts
5:34:38 PM: Started saving node modules
5:34:38 PM: Finished saving node modules
5:34:38 PM: Started saving build plugins
5:34:38 PM: Finished saving build plugins
5:34:38 PM: Started saving pip cache
5:34:44 PM: Finished saving pip cache
5:34:44 PM: Started saving emacs cask dependencies
5:34:44 PM: Finished saving emacs cask dependencies
5:34:44 PM: Started saving maven dependencies
5:34:44 PM: Finished saving maven dependencies
5:34:44 PM: Started saving boot dependencies
5:34:44 PM: Finished saving boot dependencies
5:34:44 PM: Started saving go dependencies
5:34:44 PM: Finished saving go dependencies
5:34:47 PM: Error running command: Build script returned non-zero exit code: 1
5:34:47 PM: Failed during stage 'building site': Build script returned non-zero exit code: 1
5:34:47 PM: Failing build: Failed to build site
5:34:50 PM: Finished processing build request in 1m25.525936502s
gatsby-node.js
const { createFilePath } = require(`gatsby-source-filesystem`)
const { fmImagesToRelative } = require('gatsby-remark-relative-images');
const path = require("path")
const replacePath = path => (path === `/` ? path : path.replace(//$/, ``))
exports.createPages = async ({ actions: { createPage }, graphql }) => {
const postTemplate = path.resolve(`src/components/Article/index.tsx`)
const result = await graphql(`
{
allMarkdownRemark(
sort: { order: DESC, fields: [frontmatter___date] }
) {
edges {
node {
fields {
slug
}
}
}
}
}
`)
if (result.errors) {
return Promise.reject(result.errors)
}
result.data.allMarkdownRemark.edges.forEach(({ node }) => {
createPage({
path: replacePath(node.fields.slug),
component: postTemplate,
})
})
}
exports.onCreateNode = ({ node, getNode, actions }) => {
fmImagesToRelative(node)
if (node.internal.type === `MarkdownRemark`)
actions.createNodeField({
node,
name: `slug`,
value: replacePath(createFilePath({ node, getNode, basePath: `pages` })),
})
}
Markdown Template
const ShareButtons = (
{siteUrl, shareImageUrl, title, description} : {siteUrl : string, shareImageUrl : string, title : string, description : string}
) => {
const butCls='m-1'
return (
<div className='d-flex'>
<FacebookShareButton
className={butCls}
url={siteUrl}
>
<FontAwesomeIcon icon={faFacebook} />
</FacebookShareButton>
<TwitterShareButton
className={butCls}
url={siteUrl}
title={title}
>
<FontAwesomeIcon icon={faTwitter} />
</TwitterShareButton>
</div>
)
}
const ArticleBanner = (
{title, author, category, date, siteUrl, shareImageUrl, description } :
{title : string, author : string, category : string, date : string, siteUrl : string, shareImageUrl: string, description: string}
) => (
<div>
<h5>{category}</h5>
<h1>{title}</h1>
<small><p>{author} • {date}</p></small>
<ShareButtons
{...{siteUrl, shareImageUrl, title, description}}
/>
</div>
)
const Article = ({ data }: { data: IPostRequest }) => {
// Helper to organize useful data in request
const {
markdownRemark: {
fields:{
slug
},
frontmatter: {
featuredImage,
// cover,
title,
subTitle,
author,
description,
category,
date,
},
html,
},
site: {
siteMetadata: {
domain
}
}
} = data
const siteUrl = `${domain}${slug}`
const shareImageUrl = `${domain}${featuredImage.childImageSharp.fluid.src}` //ignore this error
const metadata: ArticleMetadata = {
author,
description,
title: `${title} | ${subTitle} `,
siteUrl,
shareImageUrl
}
return (
<Layout siteMetadata={metadata} title={title}>
<Row className='w-100'>
<Col xs={2}></Col>
<Col xs={8}>
<ArticleBanner
{...{title, author, category, date, siteUrl, shareImageUrl, description}}
/>
{/* <CoverImg /> */}
<div id="article-content" dangerouslySetInnerHTML={{ __html: html }} />
</Col>
<Col md={3}></Col>
</Row>
</Layout>
)
}
export default Article
export const pageQuery = graphql`
query($path: String!) {
allMarkdownRemark(
limit: 4
sort: { order: DESC, fields: [frontmatter___date] }
) {
edges {
node {
timeToRead
excerpt(pruneLength: 100)
fields {
slug
}
frontmatter {
title
date(formatString: "MMMM DD, YYYY")
}
}
}
}
markdownRemark(fields: { slug: { eq: $path } }) {
fields {
slug
}
excerpt
html
frontmatter {
title
subTitle
date(formatString: "MMMM DD, YYYY hh:mm a")
author
category
description
featuredImage {
childImageSharp {
fluid {
src
srcSet
sizes
aspectRatio
}
}
}
}
}
site{
siteMetadata{
domain
}
}
authorPicture: file(relativePath: { eq: "author.jpg" }) {
childImageSharp {
fixed(width: 40, height: 40) {
...GatsbyImageSharpFixed
}
}
}
}
`
Just ask if you want to see any specific files
解决方案
To manage images with Netlify+Gatsby you need to install gatsby-remark-relative-images plugin. This is because you need to query images that are placed outside the directory (normally assets are placed under /assets folder).
From its documentation:
Convert image src(s) in markdown to be relative to their node’s parent directory. This will help gatsby-remark-images match images outside the node folder. For example, use with NetlifyCMS.
NOTE: This was built for use with NetlifyCMS and should be considered a temporary solution until relative paths are supported. If it works for other use cases then great!
Then, in your gatsby-node.js, you need to place the following snippet:
const { fmImagesToRelative } = require('gatsby-remark-relative-images');
exports.onCreateNode = ({ node }) => {
fmImagesToRelative(node);
};
This takes every node returned by your gatsby-source plugins and converts any absolute paths in markdown frontmatter data into relative paths if a matching file is found.
The next step is to set it up in your gatsby-config.js. It's important to follow the structure, placing your transformer remark plugin after gatsby-source-filesystem to avoid them to override it.
// 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,
},
},
],
},
The final step, which is not provided in your question, is to set up the paths for uploads and images in your config.yml, should look like something like this:
media_folder: static/assets/images
public_folder: /assets/images
In Gatsby, media_folder must be set under /static path to be accessible to React and its components. So, keeping in mind the media_folder path, your public_folder path must be set accordingly. From sourcing from Netlify Gatsby documentation.
Still in the root directory, add a "static" folder. Gatsby will copy everything in the static folder into the output, so we’ll want to place the Netlify CMS configuration file as static/admin/config.yml.
这篇关于你如何在 Netlify 上发布带有 gatsby-image 的 gatsby 项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
