TYPO3 VHS only get image Tag

Question

I want to get only the img tag not the whole cObject. This is what I´ve done:

<v:content.render pageUid="{this.uid}" column="5" as="tcolsid">
    <f:debug>{tcolsid.0}</f:debug>
    <f:format.raw>{tcolsid.0}</f:format.raw>
</v:content.render>

This is what I get:

<div id="c3" class="frame frame-default frame-type-image frame-layout-0">
    <div class="ce-image ce-center ce-above">
        <div class="ce-gallery" data-ce-columns="1" data-ce-images="1">
            <div class="ce-outer">
                <div class="ce-inner">
                    <div class="ce-row">
                        <div class="ce-column">
                            <figure class="image">
                                <img class="image-embed-item" src="fileadmin/user_upload/cappucino.jpg" width="1500" height="1101" alt=""/>
                            </figure>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

And i only want to get the img tag:

<img class="image-embed-item" src="fileadmin/user_upload/cappucino.jpg" width="1500" height="1101" alt=""/>

Can someone help?

Answer 1

Maybe something like this?

<v:content.render pageUid="23" column="0" as="records" render="false">
<f:for each="{records}" as="record">
    {v:resource.record.fal(table: 'tt_content', field: 'image', uid: '{record.uid}')
        -> v:iterator.first()
        -> v:variable.set(name: 'image')}
    <f:if condition="{image}">
        <v:media.image
            alt="{f:if(condition: '{image.alternative}', then: '{image.alternative}', else: '{data.header}')}"
            class="d-block w-100 img-fluid" crop="{image.crop}" src="{image.uid}" 
            srcsetDefault="1024" treatIdAsReference="1" />
    </f:if>
</f:for>
</v:content.render>