Vuepress: Asset handling via Frontmatter

[MartinMuzatko]

Hey there!

I would love to specify an image path via frontmatter for e.g. a header image for a specific page.
How would I do that?

1. I can't use webpack aliases as they are only interpreted for markdown images
2. I can't resolve the path, there is nothing exported by utils to resolve assets

[ulivz]

Do you mean to add a picture to the top of a specific page?

Another question, why do you need to specify an image path via frontmatter? Since frontmatter is always for this page's metadata. if you just want to show an image, you can directly use ![]() where you want to.

[MartinMuzatko]

Another question, why do you need to specify an image path via frontmatter?

I want to use custom layouts @ulivz . I want to build something similar to a blog ( #36 ). Most of the functionality I need is already done via frontmatter properties. E.g. teaserText etc.
But I would also like to define images that I can access via the custom layout and use for e.g. background image for the header.

To create something similar like this: https://happy-css.com/talks/

Vuepress or a static site generator is a perfect fit for this kind of website :) I just need to define a few properties I can re-use.
If Vuepress homepage "features" would also include preview images, they would have to include that in frontmatter as well.
https://raw.githubusercontent.com/vuejs/vuepress/master/docs/README.md

[yyx990803]

For now you can put it in .vuepress/public and reference it using absolute paths.

[MartinMuzatko]

It works but it feels a little bit clunky. had some trouble figuring out how all the paths behave.

[rafalolszewski94]

Also, when using base: '/repo-name/' config option, the paths provided in docs seems to not work.

[yyx990803]

@rafalolszewski94 please open a separate issue with more details. It doesn't help to just mention it here.

[mtobeiyf]

It would also be useful under such cases (blog post):

the yaml front matter of the README.md would expected to be:

# README.md
---
avatar: ./path1/image.png  # relative to README.md
background: ./path2/image.png
layout: Post
---

And the Post.vue would be like:

<template>
  <div>
    <img :src="data.avatar">
    <Content/>
  <div>
</template>

[shopali]

Hello there!
how to make the css property - "background-img" can be set from the " front matter"??

[psi-4ward]

Hi mates, I've a workaround for SFC as Pages. I could not find a valid require URI for SFC inside .vuepress/theme

created() {
  this.allProjects = this.$site.pages
    .filter(page => page.frontmatter.isProject)
    .map(page => {
      let thumb = null;
      if (page.frontmatter.Thumb) {
        let base = page.path.replace('/Projekte', '.');
        if (base.endsWith('.html')) {
          base = base.split('/').slice(0, -1).join('/') + '/';
        }
        // Works only with '' + ... dont know why
        page.frontmatter.Thumb = require('' + base + page.frontmatter.Thumb);
      }
    });
}

I also stumbled about https://github.com/vuejs/vuepress/issues/1110

[lorisleiva]

This would also allow us to add a particular image as meta data for SEO purposes.

# In an article/page
---
image: ./cover.jpg
---

// In a plugin
const image = $page.frontmatter.image

$page.frontmatter.meta.push({ name: 'og:image', content: image })
$page.frontmatter.meta.push({ name: 'twitter:image', content: image })

[Shigma]

Hello there!
how to make the css property - "background-img" can be set from the " front matter"??

<div :style="{ backgroundImg: $frontmatter.avatar }">

[guidetheorient]

has any update?

[hrobertson]

I just started migrating from Hugo to Vuepress as I'm turning my previously 100% static site into a Vue SPA and have hit this stumbling block.

My layouts include images in certain locations such as a hero banner and others which are outside the scope of the <Content/> so I can't put them in the markdown body of the page. I expected to be able to specify the images in the frontmatter.

I only want images that are actually referenced by a page (or style) to be included in the output and I want my images processed by webpack (resizing etc), so putting them in .vuepress/public isn't an option.

[NarvaezTames]

Im having the same problem with the frontmatter.

[realityfilter]

We hit the same problem. We want to use urls in the frontmatter for use in custom components like image sliders. Is there any workaround for this except putting assets in the public folder?

The use of the public folder is problematic for us for the following reasons

• the typical maintainer should have no access to the hidden public folder
• most images are localized and should be near their corresponding markdown pages

[iashraful]

For now you can put it in .vuepress/public and reference it using absolute paths.

This is a good hack. But not a good solution I guess. 😞

[MartinMuzatko]

For now you can put it in .vuepress/public and reference it using absolute paths.

This is a good hack. But not a good solution I guess. 😞

Most headless CMS do it that way actually nowadays.
ForestryCMS is putting everything in the public path.