Usage of v:content.resources.fal or v:resource.record.fal

FCE usage

{namespace flux=FluidTYPO3\Flux\ViewHelpers}
{namespace v=Tx_Vhs_ViewHelpers}

<f:layout name="Content" />

<f:section name="Configuration">
	<flux:form id="gallery" wizardTab="MG">
		<flux:field.inline.fal name="settings.images" multiple="TRUE" maxItems="20" />
	</flux:form>
</f:section>

<f:section name="Preview">
	<b><f:translate key="flux.gallery" /></b>
</f:section>

<f:section name="Resources">
</f:section>

<f:section name="Item">
	<li><a href="{image.url}" title="{f:if(condition: image.description, then: '{image.title}: ', else: '{image.title}')}{image.description}" rel="gallery"><f:image treatIdAsReference="TRUE" src="{image.id}" alt="{image.title}" title="{f:if(condition: image.description, then: '{image.title}: ', else: '{image.title}')}{image.description}" width="170c" height="170c" /></a></li>
</f:section>

<f:section name="Main">
	<div id="gallery">
		<div class="gallery_list">
			<ul>
				<f:for each="{v:content.resources.fal(field: 'settings.images')}" as="image">
					<f:render section="Item" arguments="{_all}" />
				</f:for>
			</ul>
		</div>
	</div>
</f:section>

Page usage

<f:for each="{v:resource.record.fal(record: page, field: 'settings.images', table: 'pages')}" as="image">
	<f:render section="Item" arguments="{_all}" />
</f:for>

If you use <v:resource.image identifier="{v:content.resources.fal(field: 'image') -> v:iterator.extract(key: 'id') -> v:iterator.first()}" treatIdAsReference="0" maxWidth="150" /> then it works as expected.
The addition treatIdAsReference="0"is the important part.