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.

[imfing]

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 #1110