Skip to main content

Docusaurus: Blog Front Matter Image Path Contains Spaces

· One min read
Corey Sutton
Azure Static Web App icon

Does your Docusaurus front matter image path contain spaces? Is Docusaurus yelling at you during build?

Maybe I can help?

[ERROR] The following front matter:
---
title: My Blog Post
description: A sweet new blog post
slug: my-blog-post
authors: coreysutton
tags:
- Power Platform
image: /img/Power Platform/PowerAutomate_scalable.svg
---
contains invalid values for field(s): `image`.

- "image" does not look like a valid url (value='')

[ERROR] Error while parsing blog post file "{path}/2022-09-01-my-blog-post.mdx".
[ERROR] Processing of blog source file "{path}/2022-09-01-my-blog-post.mdx" failed.
[ERROR] ValidationError: "image" does not look like a valid url (value='')

Attempt 1 - Quotes ❌

I tried surrounding the value in quotes, but had no luck

image: "/img/Power Platform/PowerAutomate_scalable.svg"

Attempt 2 - URL Escape Codes ✔

Instead try replacing spaces the URL escapce code %20:

image: /img/Power%20Platform/PowerAutomate_scalable.svg

Conclusion

Bingo - as easy as that. Let me know if you have a better way to fix this, as this feels hacky.