CODEWITHSUNDEEP
vue.jsnuxt.jsnuxt-content
Matt Sanders
Matt Sanders

Reputation: 10825

Automatically prepend image URLs in Nuxt Content

With Nuxt Content v2, is there a reasonable way to provide front-matter data in markdown documents to components used inside the markdown without passing it as explicit props?

For example:

---
title: "{{ title }}"
assetRoot: "/content-assets/post/my-unique-id"
---

![An Image](my-image.png)

Ideally I'd like any image specified with a relative URL to be prepended with the assetRoot in the front-matter.

It seems like with provide/inject that there should be a way to retrieve this front matter from the doc and then provide it to all child components. Then maybe I could override the prose component for images to prepend relative paths?

I've already tried something like this, given the instructions for binding data into the markdown:

---
title: "{{ title }}"
assetRoot: "/content-assets/post/my-unique-id"
---

![An Image]({{ $doc.assetRoot }}/my-image.png)

but unfortunately this breaks the parsing of markdown to create the image. It seems redundant to specify the same root URL for all images in each piece of content, is there a better way to go about this?

Upvotes: 0

Views: 33

Answers (0)

Related Questions