问题标签 [gatsby-remark-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.
javascript - 来自 Markdown 的 Gatsby + Netlify CMS 图像未转换
在完成了一些教程之后,我正在使用 Gatsby + Netlify CMS 创建我的第一个站点。但现在我从这个模板Gatsby-London开始。这个模板如何不与 Netlify CMS 集成。我使用它,我得到了它。我所做的唯一一件事就是评论了与缩略图相关的所有内容,因为它会产生一些我将在之后解决的问题,而且我删除了所有博客文章,我只留下了一篇文章。但其他一切都很好。
上传到 Netlify 后,我发现图像存在一些问题。我上传的图片。他们没有反应。但是模板附带的所有原始帖子都是响应式的。此外,我在那篇帖子中添加了一张我没有响应的图片。经过阅读和研究,我发现是引用路径有问题,需要使用相对路径。
所以我按照Issy的教程博客的步骤,它还不起作用,同样的问题。它不会转换图像。然后我尝试使用另一个插件(gatsby-plugin-netlify-cms-paths
),但一切都是一样的。
当我使用检查工具检查时,我发现该图像未包含所有 gatsby 类以使图像响应:
第一个<p>
是使用 gatsby-image 生成的,因为此图像位于 .md 文件所在的同一文件夹中。第二个<p>
是存储在 Netlify CMS 文件夹中的图像static/img
如果有人知道是哪个问题?以及如何解决。我检查了很多来源,但在我的项目中任何东西都有效。
另外,如果您可以检查这是我在GitHub中的存储库
这是我的 gatsby 配置:
盖茨比-node.js
配置.yml
reactjs - 如何在 Gatby 图像上设置 srcSetBreakpoints
我目前正在努力提高页面速度。来自 Google 的反馈之一是适当大小的图像。我使用 ContentFul 作为图像提供者。我正在寻找一种管理 srcSetBreakpoints 的方法。我添加了 maxWidth 和 Quality,但 Goggle 仍在向我显示正确尺寸的图像。所以我正在考虑管理断点。有什么方法可以添加到 contentFul 查询中?
javascript - 使用 gatsby-image 插件优化所有博客文章图片
我想知道是否有可能默认为博客文章启用所有图片的gatsby-image插件,我可能有超过 1 张图片。
这是我的博客文章使用图像的方式:
- 一张特色图片,它是 frontmatter 的一部分(我可以通过 GraphiQl 查询进行管理)
- 并且博客文章的所有其他图像都使用transformer-remark-plugin内联
我需要关于 #2 的帮助,以便为博客文章的所有图像启用 gatsby-image 插件。
博文模板
前线
gatsby - 无法将图像添加到 Gatsby 中的 mdx 文件
我正在尝试通过执行以下操作将图像导入 mdx 文件:![alt](image.jpg)
. 我的 mdx 文件和图像都存储在目录 src、posts、post-1 中。但是,图像不显示。我尝试了许多文件路径,但都没有运气。
我能够显示图像的唯一方法是使用 src 例如![alt](/static/47d93fd9bdeaaf54a7b60d14c66abe5d/48e00/icon.jpg)
以下是我的 gatsby.config 的一部分
reactjs - “gatsby-node.js”在运行 onCreateNode 生命周期时抛出错误:fmImagesToRelative is not a function
我使用宇航员从基本的默认 gatsby 启动器构建了这个项目
我不知道我做错了什么,因为这个项目与我的另一个项目非常gatsby-node
相似gatsby-config
。此错误反复在控制台中循环
盖茨比-node.js
盖茨比-config.js
gatsby-image - 内嵌图像 MDX Gatsby
我正在尝试使用 mdx 文件实现内联图像。
但我做不到,没有加载图像。
在这里阅读了一些解决方案后,他们建议gatsby-remark-images
在 options.plugins 中的插件数组中添加,如
在我的 mdx 文件中![test image]('./myFirstPost/images/colorcloud.jpg')
但它对我不起作用。任何人都可以帮助我一些指导?
干杯
markdown - Floating markdown images in Gatsby
The Problem
I would like to have the ability to wrap text around images in markdown. I am usin gatsby-remark-images
alongside gatsby-transformer-remark
. My gatsiby-config.js
file is below.
I have set the float
property using the wrapperStyle
option of gatsby-remark-images
. This does get translated into the style for the span containing the image, but the span has no width, so the image is not displayed on the page.
Now, if I open up dev tools and set a width on the span, I get the image.
So, the problem is that I need a way to set the width of the image in markdown and have gatsby-remark-images
translate that size onto the span. It would also be nice to be able to choose the float location of the image in the markdown. Are either of these things possible?
Gatsby config
The Markdown
gatsby - 动态引用不在 Gatsby 中的静态目录中的图像
我有一堆降价文件,如下所示,我在其中引用了项目中图像的路径src/images
:
以及gatsby-config
图像路径所基于的条目:
然后我查询这些 Markdown 文件,它们都在同一个目录中:
TestComponent
并通过在节点上映射并将数据作为道具传递来为每个降价文件生成下面的类似内容
问题是 Gatsby 没有拾取build
或develop
传递中的图像,因此图像被破坏了。这个用例的文档中唯一的解决方案似乎是static
目录,但我想将图像保存在src/images
. 这可能吗?