Preview for custom imageblock

Kirby 3
1

Hello,
I have a structured field for mockups on the site level.

blueprint/site.yml:

global_mockups:
    label: Mockups
    icon: template
    fields:
      mockups:
        label: Mockups
        type: structure
        fields:
          ala_mockup:
            type: files
            max: 1
            layout: cards
            info: "{{ file.dimensions }}"
          mockup_name:
            lable: Mockup Name
            type: text

These mockups can be selected with a mockup block in the backend.

blueprints/blocks/Mockup.yml

name: Mockup
icon: template

fields:
  mockup_select:
    type: select
    options:
      type: query
      query: site.mockups.toStructure
      text: "{{ item.mockup_name }}"
      value: "{{ item.mockup.toFiles }}"

I want to show the selected Image as preview in the backend.
But only a empty img-tag appears.

plugins/Mockup-block/index.js

panel.plugin("xy/Mockup-block", {
  blocks: {
      alaMockup: {
        computed: {
          image() {
            return this.content.mockup_select[0] || {};
          }
        },
      template: `
      <div>
        <h3>MockUp</h3>
        <p>{{ content.mockup_select }}</p>
        <k-aspect-ratio
            class="k-block-type-card-image"
            cover="true"
            ratio="4/3"
          >
        <img
          :src="image.url"
        />
        </k-aspect-ratio>
      
      </div>
      `
      }
  }
});

When i try
<p>{{ content.mockup_select }}</p>
Only the filename appears filename-xy-abc.jpg

How can i convert the content.mockup_select to an url?

Thank you! :innocent: