G-image only works with relative path in markdown files

[buildingsareheavy]

Unless an image's path is ./image-name.jpg it shows up as a regular <img> and doesn't have all the fancy srcset and other stuff that <g-image> adds. This frustrating because Netlify CMS doesn't support relative paths. Everything has to start with a / in front, and / doesn't show up, but ./ does.

Does anyone know either how to 1.) make relative paths in Netlify CMS, i have googled and have not come up with any solution so far, or 2.) is it possible to add <g-image> to ALL images in markdown files regardless of their paths. Thank you in advance.

[tyrion]

Hello, I made a plugin to solve exactly this issue. You may have a look here: https://github.com/tyrion/gridsome-plugin-netlify-cms-paths

I hope it can be useful, until a proper fix is released

[dhondtlaurens]

Hello, I made a plugin to solve exactly this issue. You may have a look here: https://github.com/tyrion/gridsome-plugin-netlify-cms-paths

I hope it can be useful, until a proper fix is released

Works like a charm, thank you!

[fmeyer1980]

How do i make relative path work when nested ind gridsome-plugin-netlify-cms-paths ?

query PageHome { frontpage (path: "/"){ the_firm{ heading text image } approach{ heading text image } section_image_one{ heading cover_image (width: 1400, height: 800) text layout } section_image_two{ heading cover_image (width: 1400, height: 800) text layout } section_image_three{ heading text cover_image (width: 1400, height: 800) layout } } }

[gustawdaniel]

In my case this works

<g-image src="~/gmail.png"/>

But this

![](~/gmail.png)

no. Can anyone explain why?

Official docs does nott show how to debug this case

https://gridsome.org/docs/images/

[gustawdaniel]

I fixed using static I think that this topic should be mentioned in official docs.

[wishx97]

I fixed using static I think that this topic should be mentioned in official docs.

Hi, I have encountered the same problem.
How do you solve it using static ?

[mr-spacklefish]

I fixed using static I think that this topic should be mentioned in official docs.

How did you fix this issue using static? I'm still having the same exact problem. Nothing but blurred images when I deploy. Thanks.

[rockhigher]

In my case, when i used img tags in markdown files, I had to use the static directory to host the images for my posts, something like:

<img="../images/my-image.jpg">

However, to also see images while i was in development mode (gridsome develop), that meant that i had a copy of the images folder on the same level as the folder containing my markdown files too, something like:

/images/my-image.jpg
/markdown/my-post.md

While admittedly it was quite messy to have two copies of the images folder, it was the only workaround I had in mind at the time. However, if there's a simpler/better way (or an update in Gridsome that addresses this), I would be happy to know more about it too! 😃