I keep receiving an error in NextJS when trying to use the image component with data from NetlifyCMS. Does anyone know how to ensure there's a leading slash to the image url that is generated into markdown. The error I keep receiving is
Error: Failed to parse src "img/occasions-thumb.jpg" on `next/image`, if using relative image it must start with a leading slash "/" or be an absolute URL
The markdown it is using is:
---
title: New Title
intro: blabbidy blah blah intro text
image: img/occasions-thumb.jpg
---
Component looks like:
export default class Home extends Component {
render() {
let { title, intro, image } = attributes;
return (
<>
<Head>
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</Head>
<article>
<h1>{title}</h1>
<p>{intro}</p>
<Image
src={image}
alt={title}
width="600"
height="500"
layout="responsive"
/>
</article>
</>
)
}
}
And config.yml is:
backend:
name: git-gateway
branch: main
media_folder: public/img
public_folder: /img
collections:
- label: "Pages"
name: "pages"
files:
- label: "Home"
name: "home"
file: "content/home.md"
fields:
- {label: Title, name: title, widget: string}
- {label: Intro text, name: intro, widget: text}
- {label: Image, name: image, widget: image}
If i just manually add a leading slash to the image url in the markdown it parses fine, but obviously that's not a solution since I would like to use the CMS.
