How to get the ~/ content in frontmatter and escape it properly?

[kecrily]

I defined a banner field in the frontmatter of the markdown file to hold the banner image.

They look like this

---
title: Hello World
banner: ~/images/hello-world.webp
---
Hello

Then I get this field in layout like this

<template>
  <img :src=$frontmatter.banner />
</template>

Rendered like this

<img src="~/images/hello-world.webp">

How can I get it to render as expected?

[ElMassimo]

Please read this similar discussion which provides several options to tackle this use case.