Relative image paths

Sorry but I’m completely confused by how Gridsome handles relative image paths.

Right now, the frontmatter in my markdown is image: /media/image.jpg, and the media directory exists at the root of my project.

<div v-for="{ node } in $static.allOrganization.edges" class="sponsor__item" :key="node.id">
  <g-image :src="node.logo" :alt="node.name" />
</div>

The expected values ends up in the resulting image tag, but the problem is that /media/image.jpg doesn’t exist.

How do I get Gridsome to point to this? Alternatively, can I get g-image to modify the the image path and point to the location instead?

[cco3]

@hjvedvik Is there any way to specify images relative the src/ directory in the front matter? I was hoping image: ~/dir/image.jpg would work, but it doesn’t seem to.

[hjvedvik]

@freshyill When using absolute paths, Gridsome will look for a file located somewhere in the /static folder. So moving the /media folder to /static/media should make your images work. But keep in mind that images in the /static folder are not processed in any way, just copied to the /dist folder when building for production.

You can use relative paths like image: ./image.jpg to process them with the built-in image processor. The image path must be relative to the Markdown file referencing it.