Fluid menu element with image from page resources?

Question

I've created a new fluid menu element and I need it to show an image for each page. The image is stored in the page resources.

When I debug the template, each menu item shows data.media => 1 but media cannot be expanded any further. How can I get the image to render in my template?

TS:

ext_menu_image < lib.contentElement
ext_menu_image {
    templateName = MenuImage
    dataProcessing {
        10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
        10 {
           special = directory
           special.value.field = pages
           levels = 1
           as = menuItems
           expandAll = 1
           titleField = nav_title // title
        }
    }
}

Template:

<f:for each="{menuItems}" as="page">
  {f:uri.image(image:page.data.media.???)}
</f:for>

Answer 1

By default the MenuProcessor just puts the data directly from the table into the array in Fluid. The media field in the pages table, just holds the number of relations. So you need another data processor so it is translated to a file. This should do it:

ext_menu_image < lib.contentElement
ext_menu_image {
    templateName = MenuImage
    dataProcessing {
        10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
        10 {
           special = directory
           special.value.field = pages
           levels = 1
           as = menuItems
           expandAll = 1
           titleField = nav_title // title
           dataProcessing {
             10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
             10 {
               references.fieldName = media
             }
           }
        }
    }
}