Image Assets in .md header

I'd like to have a custom page header containing an image asset. Something like:
---
title: Page Title
banner: image.jpg
---

Adding {{ header.banner }} to the template outputs the image filename, but the path is incorrect so the image doesn't work.

How can I link to an image asset using a variable from the header?

I guess the ultimate question is where is the image stored? that directly effects the URL. if it's simply in the same folder as the page, You can do something like:

{{ page.media[header.banner].url() }}

Apologies, I forgot to mention that critical piece of info. The image is currently stored in the same directory.

Your solution works great, thank you!