Problem with markdown images, using the Kaldi starter (Gatsby image not working properly)

Netlify CMS
1

Hello, I’ve recently started developing a website with the Kaldi starter, and after some hours of research, testing and trying out, I can’t make markdown images working properly and having the blur/traceSVG effect from Gatsby. The images are on the body of the markdown file, not on frontmatter.

If you people take a look at the source starter: Gatsby + Netlify CMS Starter and click on one of those posts with images, you will see the images will cause CLS (Content Layout Shift), because there are no width or height attributes either.

If somebody could help me, and maybe update the Kaldi starter, I would be really appreciated. I’ll leave here my github repo, in case someone wants to take a deeper look at the problem: GitHub - ositaka/design-code-tips-v2: V2 of design-code.tips

Thank you for the help!

2

Ive found here the solution for this issue: reactjs - "gatsby-node.js" threw an error while running the onCreateNode lifecycle: fmImagesToRelative is not a function - Stack Overflow (Thank you Sam)

Basically, we must replace
"gatsby-remark-relative-images": "^0.3.0"
by
"gatsby-remark-relative-images-v2": "^0.1.5"
and update the gatsby-config.js and gatsby-node.js files accordingly.

Hope this thread will help somebody else in the future!

1 Like