问题标签 [gatsby-image]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
53 浏览

reactjs - 如何使用 Gatbsy Image 映射我在 GraphQL 中的默认导出?

我想在 GraphQL 中映射我的导出,而不是重复我的图像 3 次,检查我的代码以了解我。

这是我的出口:

这是我的导入和 GraphQL

在这里,我想映射我的图像而不是重复它们,这取决于我的导出

0 投票
1 回答
768 浏览

javascript - 盖茨比工人错误:

我是 Gatsby 的新手,当我尝试启动 Gatsby 项目gatsby develop --port 8080 时,遇到以下错误:

WorkerError:处理 C:/Users/AOmurzakov/Desktop/Job/landings/packages/project-business/.cache/gatsby-source-filesystem/6e42032743dd2dda7e331865dd496bd9.png 失败原始错误:

  • jobs-manager.js:314 exports.enqueueJob [landings]/[gatsby]/dist/utils/jobs-manager.js:314:23

    • 运行微任务

    • task_queues.js:93 processTicksAndRejections internal/process/task_queues.js:93:5

未完成运行查询 - 2.879 秒未完成生成图像缩略图 - 2.859 秒

页面
进行中
@project/businessnpm 错误!代码 ELIFECYCLE npm 错误!errno 1 npm 错误!lerna@project-business:cd packages/project-business && gatsby develop --port 8080npm 错误!退出状态 1 npm ERR!npm 错误!lerna@ start:project-business 脚本失败。npm 错误!这可能不是 npm 的问题。上面可能有额外的日志输出。

npm 错误!可以在以下位置找到此运行的完整日志:npm ERR!
C:\Users\AOmurzakov\AppData\Roaming\npm-cache_logs\2020-02-12T05_22_16_490Z-debug.log PS C:\Users\AOmurzakov\Desktop\Job\landings>

我试图删除 .cach by gatsby clean。它没有用我也试图开始这个项目

12 和 10 版本的节点

但它没有效果,同样的错误。有人可以建议吗?

0 投票
1 回答
582 浏览

reactjs - How to set FuturedImage to og: image. in gatsby.js

I using gatsby.js.

I want to set the featuredimage described in markdown in the og: image attribute of the meta tag, but it does not work.

The featuredimage is optimized for different paths by gatsby, but the relative path is set to the physical path before build.

How do I set the path for the featuredimage created by the build?

My React Helmet code (excerpt):

My GraphQL query:

Thanks.

0 投票
1 回答
365 浏览

markdown - 如何在 Gatsby 网站的 Markdown Mdxjs 中响应式地并排添加图像?

我想使用 Markdown Mdxjs(对于 Gatsby 网站)响应式地并排放置图像。

表格对我不起作用,因为:

  • 有必要为列添加标题(我只想显示图像,没有文字)。
  • 它对移动设备没有响应(如果图像太大,它们应该显示在下一行)
  • 无法调整图像大小
0 投票
1 回答
1046 浏览

javascript - 如何在graphql gatsby中允许可选的清晰图像?

我通常有一个包含对象数组的frontmatter,每个对象内部都有一个图像,该图像将引用相对于markdown文件的文件字符串。

问题是,数组有时可能是空的,这意味着 graphql 必须通过将所有值设置为非空来计算架构是什么,我已经能够使用简单类型(例如使用 Gatsby's 的字符串)来做到这一点createSchemaCustomization,但我希望能够声明一个引用图像的字符串以使用 Image Sharp(因此 gatsby-transformer-sharp 可以在组件接收之前压缩图像)。

Gatsby 文档或图像清晰插件上的任何地方似乎都没有为此提供模式类型。

我尝试将File!其用作在数组为空时起作用的类型,但是当您实际尝试引用真实图像时,它仅返回{ image: childImageSharp: null }意味着 gatsby-transformer-sharp 不像File!未标定时那样在它们上运行。

以下是我的架构的声明方式:

这是我的 graphql 查询:

还有我的降价文件,它返回特征对象数组,image是应该创建流体图像清晰对象的字符串。

作为概述,只要我删除所有图像就会显示,但是一旦数组为空,构建就会中断File!createSchemaCustomization

0 投票
1 回答
397 浏览

gatsby - GatsbyJS - 加载多个远程图像并链接到节点 - 没有 ChildImageSharp

我的设置是使用 Ghost 作为外部 CMS 的 GatsbyJS,我正在尝试在本地加载页面的所有图像。

所以我找到了一篇博客文章,向我展示了一种对一张图片执行此操作的方法,这对我有用:https ://ghost.joonaviertola.com/optimize-ghost-images-in-gatsby/

然后我想我也可以对多个图像执行此操作,而不是将一个图像链接到节点,而是创建一个包含所有图像的数组。我第一次尝试只为一张图片。直接链接图像并将图像推送到节点上的数组中。

在 GraphQL 资源管理器中,我现在看到:

在此处输入图像描述

工作也是如此node.localImage___NODE = fileNode.id,我得到了链接到节点的图像,childImageSharp里面有。

node.localImages.push(fileNode)另一方面似乎有效,因为我得到了一个包含(在这种情况下)一个图像的数组。只有childImageSharpandchildMarkdownRemark丢失了,这是我想要开始的部分。

现在我不确定这整个方法是否完全错误,或者我只是一步之遥。有什么想法吗?

0 投票
1 回答
156 浏览

graphql - Graphql 查询不返回 gatsby-image 的图像,但适用于 graphiQL

我正在构建一个包含多个gatsby-source-filesystem实例的博客。

我正在尝试在页面上使用 gatsby-image 但它只是返回: TypeError: Cannot read property 'fixed' of undefined

我要查询的图像位于 src/images

精神.js

盖茨比-config.js

0 投票
1 回答
463 浏览

reactjs - 让我的 Gatsby 装备从 S3 中提取图像的最佳方法是什么?

我正在尝试将 ai2html 合并到 Gatsby 构建的存储库中。我很快意识到我不能简单地使用gatsby-image,因为我没有将所有东西都部署到一个地方:我的代码 viapublic/index.html去一个地方,我的图像存在于 AWS S3 中。我正在寻找一种通过 URL 将图像拉入我的方法src/index.js,最好采用分步教程的方式,因为我是 Gatsby 的新手。

到目前为止,我已经尝试使用gatsby-source-s3(docs here),但我不确定我是否在我的index.js(我已经安装了它并将相关信息放入gatsby-config.js

我的主要问题是,{data.images.node.Url}调用图像的最佳方式是还是我做错了?这是最好的方法吗?有没有人看到其他方法来做到这一点?

0 投票
1 回答
458 浏览

reactjs - 你在哪里存储 gatsby-images?

新来的盖茨比。

我遵循了 Gatsby-image 指南并将我的照片存储在我的项目中的 images 文件夹中,然后通过 graphQL 从那里提取照片。它在本地工作得很好,但我猜这种存储并不适合实际生产?当我在部署时从公共 HTML 和模糊图像中得到“无法加载资源错误”。从浏览堆栈溢出和 github 来看,看起来很多人都遇到了这个问题。

那么每个人都将照片存储在哪里?只是好奇一些建议,谢谢!

0 投票
1 回答
536 浏览

reactjs - 如何查询 gatsby-image?

我正在尝试查询棱镜单一类型以通过 gatsby-image 显示照片。在 GraphiQL 中搞乱之后,我看到了图像 url,但我不确定如何将其插入 gatsby-image。有什么建议吗?在此处输入图像描述