Display image url from file custom field

Shouldn’t you be using a field with type filepicker instead of file?

  • File
    in Admin, File is specialized to be used in plugin and theme configurations (blueprints). Handles uploading a file to a location and deleting it, and removing it from the theme / plugin configuration|
  • Filepicker
    Filepicker allows to choose files from a location in the web server filesystem.|

I use the following to set the frontmatter in my page:

header.theme.headerImage:
  type: filepicker
  folder: 'theme@:/images/headers'
  label: Select an image as header
  preview_images: true
  accept:
    - .png
    - .jpg