问题标签 [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 回答
584 浏览

reactjs - Gatsby 无法处理来自 markdown 文件的图像

我正在修改 Gatsby 的博客,速度很快,一切看起来都很完美,但我面临着不同类型的问题,因为我通过 Netlify CMS 获得的图像在博客中没有正确显示,图像看起来很模糊。我不知道这里出了什么问题。

这是问题陈述的示例

演示

这是我的 gatsby-config.js 的摘录。

包.json

配置.yml

这是问题的演示和复制的存储库链接 REPO LINK

先感谢您。

0 投票
1 回答
92 浏览

javascript - 我需要将 gatsby-image 添加到我的网站。需要一些方向

我正在尝试使用 GraphQL 添加 gatsby-image。我不需要重写我的整个启动器我只想要加载时间的图像优化。所有的数据查询都是用 lodash 完成的,所以我很困惑。我知道我在文档之后遗漏了一些简单的东西。

我正在测试一个标题只是为了看看我是否正在访问数据。
我需要将此查询添加到 gatsby-node 吗?

0 投票
0 回答
251 浏览

base64 - Gatsby 在 html 中用 base64 字符串替换图像,但仍然在 javascript 中提供它

我在我的 Gatsby 网站中加入了一些小图片。生成的 html 使用 base64 字符串,这很好。出于某种原因,Gatsby 在组件---src-pages-index-js-89ae02357f7d97fc84f9.js 中包含完全相同的 base64 图像字符串。

我可以改变这种行为吗?

0 投票
1 回答
1248 浏览

reactjs - 使用 gatsby-image 加载图像缓慢

我有这个网站:https ://zeitouni.herokuapp.com ,其中有很多高质量的图像。当用户第一次加载网站时,gatsby-image 需要很长时间才能加载大部分图像。该项目的回购在这里:https ://github.com/EliranGooner/zeitouni

我怀疑的第一件事是图像尺寸。我不确定我应该争取哪些尺寸,以加快图像加载速度。问题也可能是我用来获取图像的组件。这是我在 Spectrum 上找到的一种方法,建议使用它来解决无法使用 Graphql 对查询进行插值的问题。该组件如下所示:

0 投票
0 回答
320 浏览

gatsby - MDX文件中图片使用的区别(盖茨比)/

我正在开发 Gatsby 静态站点,因此我想使用 MDX 创建有关已完成项目的页面。在 Gatsby 中使用 MDX 的标准语法是否有区别:

并使用普通标签:

“gatsby-remark-images”是否处理使用常规 img 标签导入的图像,或者它只理解文档中的方法?

我问是因为我需要对图像进行样式设置,当我像下面的示例那样编写代码时,我得到了很大的嵌套结构。

带有常规 img 标签的代码更简单,它不包含 p、span 等。

谢谢!

0 投票
0 回答
63 浏览

reactjs - 将 imageSharp 添加到 post.js

如果我能得到一些关于将 gastby-image 添加到我的 post.js 的方向。我不知道如何获取查询页面的图像。每次我似乎都无法让变量起作用。使用变量时,我确实删除了 staticQuery。但它返回的只是一个 9 位数字。我想也许我可以把所有的图像都带进来并整理它们,但在那里也没有任何运气。

我将把我的 post.js 和我的创建页面 gatsby-node。谢谢!

post.js

盖茨比-node.js

0 投票
2 回答
1704 浏览

reactjs - 如何为 gatsby 图像添加背景渐变?

我正在使用gatsby-image并尝试在图像上添加暗渐变,但它没有按预期工作。

这是我的代码:

0 投票
1 回答
623 浏览

reactjs - Markdown 中的图像未加载到 gatsbyjs 的模板中

就像本教程在 Markdown 帖子和页面中使用图像一样;我正在尝试将博客文章的图片从我的 markdown(frontmatter) 加载到我的模板标题

我的模板组件如下所示:

但我不断收到这个错误。

错误:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件),但得到:未定义。

我的 gatsby-config 看起来像

还有我的 gatsby-node

0 投票
1 回答
266 浏览

gatsby - 如何让 GraphQL 知道文件名是图像 - 自定义 API 不创建固定/流体图像

我有一个使用 gatsby-source-apiserver 访问的自定义 api 端点。我的数据库中有没有转换为图像节点的图像 - 即允许 childimagesharp

在我的graphql中,我有这个结构:

sourceFilename 是一个字符串,如“thisisanimage.jpg” - 如果我在其上附加一个 url,如“ http://example.com/media ”,则图像工作正常。我不确定如何继续,我查看了 createResolvers 但不完全了解如何实现它。

这是我迄今为止尝试过的 - 似乎没有做太多(除了在我的终端中获得“发生任何事情”的评论,但不是下一个......

可能很重要的一点是,works 是一个 mediaItems 数组,它本身就是一个字段数组,其中 sourceFilename 就是其中之一。请参阅随附的屏幕截图

上述查询的graphQL结果

0 投票
2 回答
381 浏览

javascript - 如何定义背景滑块的背景以及如何修复它?

我正在尝试为餐厅制作背景滑块。出于这个原因,我使用了 gatsby-image-background-slider。当我执行“gatsby develop”时,它在执行时没有显示错误,但是当我尝试在本地主机中浏览时,它显示错误“× TypeError:无法读取未定义的属性'背景'”

源代码可以在这里找到在这里输入链接描述

我想使用轮播,但我认为使用这个插件会更好。这是我在 gatsby 的第一次尝试。我已经安装了插件并尝试了 graphql 中的查询。根据 gatsby-image-background-slider 文档,没有提到将目录提供给背景。我尝试在相对路径中输入一些内容,但它显示错误并且文档中未提及。

有什么想法我怎样才能摆脱这个错误或者我可以有一个背景滑块或旋转木马之类的优化方式吗?