How can I render an image stored in a custom page properties tab?

I am building a main navigation in TYPO3 12 with drop down menus that contain images for each subpage. I added a custom tab 'Navigation' to the page properties, where I upload that image. What I do not understand is what I need to do in the fluid Template to output this image in the front-end.

I set up a menu data processor and one for images:

dataProcessing {
    20 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
    20 {
        levels = 2
        includeSpacer = 1
        as = mainnavigation
    }
    30 = files
    30 {
        as = images
        references.fieldName = image
        references.table = tt_content
        sorting = title
        sorting.direction = descending
    }
}

In my Fluid Template I am looping through the array that contains the children/subpages of the main menu:

<ul class="dropdown__list">
    <f:for each="{mainnavigationItem.children}" as="child">
        <li class="{f:if(condition: child.active, then:'active')}">
            <a href="{child.link}" target="{child.target}" title="{child.title}"> {child.title}
            
            <img/> --- Here should be the image

            </a>
        </li>
    </f:for>
</ul>

Accessing the array with {child.data.navigation_image} obviously just returns 0 or 1. How can I reference the file? I read about helpful extensions such as vhs or sms responsive images. I know how to render images within a content elements gallery, but this image is stored in the page properties and that leaves me clueless. I guess I need to work with the data processor but how?

Solution

You need to process your images inside the elements of your menu processor (as the images belong to the menu items).

Your attempt processes images aside from the menu.

An attempt could be like this:


dataProcessing {
    20 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
    20 {
        levels = 2
        includeSpacer = 1
        as = mainnavigation

        dataProcessing {
            10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
            10 {
                references.fieldName = myMenuImage
            }
        }
    }
}

and inside your menu loop use <f:media file="{child.files.0}" />
or <f:image image="{child.files.0}" />.

based on the documentation, where the image is fetched from the build in field media. (You wrote you generated your own field for the navigation/ menu image)