TYPO3 DCE: image in section - typo3

Question

How can I use a image field in a DCE section?
An image element (myImage) can be accessed like this:
<f:for each="{dce:fal(field:'myImage', contentObject:contentObject)}" as="fileReference">
<f:image src="{fileReference.uid}" alt="" treatIdAsReference="1" />
</f:for>
But if I loop through a section (mySection), this code does not work.
Solution after lots of debug:
Use this element for "myImage": File Abstraction Layer (section use only)
<config>
<type>group</type>
<internal_type>db</internal_type>
<appearance>
<elementBrowserType>file</elementBrowserType>
<elementBrowserAllowed>jpg,jpeg,png,gif</elementBrowserAllowed>
</appearance>
<allowed>sys_file</allowed>
<size>1</size>
<minitems>1</minitems>
<maxitems>1</maxitems>
<show_thumbs>1</show_thumbs>
</config>
Use this template code
<f:for each="{field.mySection}" as="teaserbox">
<f:image src="{teaserbox.image}" alt="" />
{teaserbox.text}
</f:for>
You have to remove treatIdAsReference="1" - it will cause this error:
No file usage (sys_file_reference) found for given UID.
This is not the 100% perfect solution, as you don't have the fields like alt, but it works. Better solutions are welcome!

Answer 1

This was not possible in older DCE versions. In the newer ones you can choose FAL Image for Section Configuration. That looks like this:
<config>
<type>group</type>
<internal_type>db</internal_type>
<appearance>
<elementBrowserType>file</elementBrowserType>
<elementBrowserAllowed>jpg,jpeg,png,gif</elementBrowserAllowed>
</appearance>
<allowed>sys_file</allowed>
<size>5</size>
<minitems>0</minitems>
<maxitems>5</maxitems>
<show_thumbs>1</show_thumbs>
</config>
And in your template this should work:
<f:for each="{item.image -> dce:explode()}" as="imageUid">
<f:image src="file:{imageUid}"/>
</f:for>

Answer 2

//this is file upload control with little changes
<config>
<type>group</type>
<internal_type>db</internal_type>
<appearance>
<elementBrowserType>file</elementBrowserType>
<elementBrowserAllowed>jpg,jpeg,png,gif</elementBrowserAllowed>
</appearance>
<allowed>sys_file</allowed>
<size>5</size>
<minitems>0</minitems>
<maxitems>5</maxitems>
<show_thumbs>1</show_thumbs>
<dce_load_schema>1</dce_load_schema>
<dce_get_fal_objects>1</dce_get_fal_objects>
It will look like
In Dce backend it will look like below image
In my case it will look like this
<f:for each="{field.contentBoxes}" as="contentbox">
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="choose__item">
<f:for each="{contentbox.icon}" as="image">
<f:image image="{image}" />
</f:for>
<f:format.html>{contentbox.content}</f:format.html>
</div>
</div>
</f:for>
Now In your case you should try like this
<f:for each="{field.mySection}" as="teaserbox">
<f:for each="{teaserbox.image}" as="img">
<f:image image="{img}" />
</f:for>
{teaserbox.text}
</f:for>