How to use a `withBase` helper in vitepress within formatter in md files?

DSYZayn commented 11 months ago

Describe the bug

I try to use home layout and type like this:

features:
  - title: <img src= "/imgs/ArcGIS.png" alt="ArcGIS" class="inline-block"/>ArcGIS
    details: Use the ArcGIS Maps SDK for JavaScript to build compelling web apps that unlock your data’s potential with interactive user experiences and stunning 2D and 3D visualizations.
    link: https://developers.arcgis.com/javascript/latest/
    target: "_blank"

It runs well in dev, but when I deployed on gh-pages in a custom repository, the site comes like \<username>.github.io/\<repo>/xxx.So I set base option in ./docs/.vitepress/config.mts, the logo.png runs well under this option.but in index.md>home layout>features,it didn't work. if add a \<repo> before src link, worked but I should change it every time when add or remove a feature:

features:
  - title: <img src= "/gest_webgis/imgs/ArcGIS.png" alt="ArcGIS" class="inline-block"/>ArcGIS
    details: Use the ArcGIS Maps SDK for JavaScript to build compelling web apps that unlock your data’s potential with interactive user experiences and stunning 2D and 3D visualizations.
    link: https://developers.arcgis.com/javascript/latest/
    target: "_blank"

How can I use a withBase helper in vitepress within formatter in md files?

Reproduction

write an img tag in home layout > features>title,set base option in ./docs/.vitepress/index.{js,mts}

Expected behavior

the /imgs/xxx.png should automatically change into ${baseUrl}/imgs/xxx.png at runtime or use withBase helper in home features

System Info

win11, gitpub pages

Additional context

No response

Validations

[X] Check if you're on the latest VitePress version.
[X] Follow our Code of Conduct
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

brc-dd commented 11 months ago

I don't think there is any easy way to support that. Frontmatter is extracted and processed like strings. That's why those img tags are not being transformed.

As a workaround, you can do something like this:

<img src= "./imgs/ArcGIS.png" ... -- use relative urls

(assuming your imgs directory is inside <root>/public/ and you are writing this code inside the frontmatter of <root>/index.md.

DSYZayn commented 11 months ago

@brc-dd Amazing workaroud! I used to think "./imgs" can't work on dev, seems like more I need to learn.

vuejs / vitepress