Skip to content

Frontmatter: images in meta tags aren't resolved/bundled #2419

Open
@hybridherbst

Description

@hybridherbst

Describe the bug

I'm trying to piece together how to properly create

<meta property="og:image" content="https://my.page/images/example.png">

and similar.

I found

I tried to reference the image from frontmatter;
but while the direct markdown image reference is resolved and copied out, the frontmatter URL stays the same.

---
title: "Title"
description: "Desc"
head:
  - - meta
    - name: property="og:image"
      content: ./../src/relative/image.jpg
---

![An image](./../src/relative/image.jpg)

The above should in my opinion result in the image being copied over and the path resolved, and then the path could be further transformed in transformHead given some known absolute target URL where the website will end up at.

I also tried
content: url(./../src/relative/image.jpg)
in the hopes that this will trigger vite/vitepress understanding that's a file/url and should be treated as such, but that didn't work either.

Reproduction

It seems I can't upload images at vitepress.new, so can't add a repro there. I hope above explanation is sufficient.

Expected behavior

  1. Ability to reference relative images from frontmatter so they're bundled properly
  2. Docs for how to transform them to absolute URLs for use as meta tags

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 32.63 GB / 63.85 GB
  Binaries:
    Node: 18.13.0 - D:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.13.2 - D:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 113.0.5672.127
    Edge: Spartan (44.22621.1702.0), Chromium (113.0.1774.35)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    vitepress: ^1.0.0-beta.1 => 1.0.0-beta.1

Additional context

There could also be additional processing steps involved on images (e.g. vite imagetools), so I think images referenced from frontmatter should be bundled/processed too.

Validations

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions