TYPO3 - FilesProcessor - print out image tag in FLUID Template

I want to read out the "images" from a content element with FilesProcessor.

But I can't get the files array filled

In the TYPO3-Backend I add an image to the content element:

My TypoScript:

// Part 1: Fluid template section
page.10 = FLUIDTEMPLATE
page.10 {
    templateName = TEXT
    templateName {
      cObject = TEXT
      cObject {
        data = pagelayout
        required = 1
        case = ucfirst
        split {
          token = pagets__
          cObjNum = 1
          1.current = 1
        }
      }
      ifEmpty = Default
    }
  templateRootPaths {
      0 = EXT:site_package/Resources/Private/Templates/Page/
      1 = {$page.fluidtemplate.templateRootPath}
  }

  partialRootPaths {
      0 = EXT:site_package/Resources/Private/Partials/Page/
      1 = {$page.fluidtemplate.partialRootPath}
  }

  layoutRootPaths {
      0 = EXT:site_package/Resources/Private/Layouts/Page/
      1 = {$page.fluidtemplate.layoutRootPath}
  }
 
}


page.10 {

    dataProcessing {
      10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
      10 {
         levels = 1
         includeSpacer = 1
         as = mainnavigation
        
      }
      20 = TYPO3\CMS\Frontend\DataProcessing\DatabaseQueryProcessor
      20 {
        table = tt_content
        orderBy = sorting
        where = colPos = 1
        as = jumbotronContent 
         dataProcessing {
            10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
            10 {
              as = images
              reference.fieldName = image
            }
        }
      }
   
   }
}

My Jumbotron-Content-Element HTML-Template:

<f:debug title="all" inline="true">{_all}</f:debug>  

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
    <section class="hero">
        <div class="d-flex container">
            <div class="d-flex flex-column justify-content-center">
                <f:for each="{jumbotronContent}" as="Jumbotron" iteration="iter">
                    <h1>{Jumbotron.data.header}</h1>
                    <h2>{Jumbotron.data.subheader}</h2>
                    <button>SABER MAIS AGORA</button>
            </f:for>
            </div>
            <div class="hero-image d-flex justify-content-center">
                
                <f:for each="{images}" as="image">
                    <f:debug>{image}</f:debug>
                    <f:image image="{image.originalFile}"/>
                </f:for>
            
            </div>
        </div>
    </section>
</html>

But the f:debug-Viewhelper tells me images => array(empty)

How can I fill the image array? I probably put the FilesProcessor code on the wrong place. Can someone plase assist.

Thank you

Solution

Your configuration has a typo: it should be references (plural):references.fieldName

page.10.dataProcessing.20.dataProcessing.10.references.fieldName = image