Note that image operations (cropping, scaling, converting) on non-FAL files (i.e. extension resources) may be changed in future TYPO3 versions, since those operations are coupled with FAL metadata. Each non-FAL image operation creates a "fake" FAL record, which may lead to problems.

External URLs are not processed. Only a given width and height will be set on the tag.

Examples

Default

::

<f:image src="EXT:myext/Resources/Public/typo3_logo.png" alt="alt text" />

Output in frontend::

or in backend::

Image Object

::

<f:image image="{imageObject}" />

Output::

Inline notation

::

{f:image(src: 'EXT:viewhelpertest/Resources/Public/typo3_logo.png', alt: 'alt text', minWidth: 30, maxWidth: 40)}

Output::

Depending on your TYPO3s encryption key.

Other resource type (e.g. PDF)

::

<f:image src="fileadmin/user_upload/example.pdf" alt="foo" />

If your graphics processing library is set up correctly then it will output a thumbnail of the first page of your PDF document: <img src="fileadmin/_processed_/1/2/csm_example_aabbcc112233.gif" width="200" height="284" alt="foo">

Non-existent image

::

<f:image src="NonExistingImage.png" alt="foo" />

Could not get image resource for "NonExistingImage.png".

Base64 attribute

When the :typo3:viewhelper-argument:base64 <typo3-cms-fluid-viewhelpers-imageviewhelper-base64> argument is set to true, the resulting image tag contains the source of the image in a base64 encoded form.

.. code-block:: html

<f:image base64="true"
         src="EXT:backend/Resources/Public/Images/typo3_logo_orange.svg"
         class="pr-2"
/>

Will result in the according HTML tag providing the image encoded in base64.

.. code-block:: html

<img class="pr-2"
     src="data:image/svg+xml;base64,PHN2...cuODQ4LTYuNzU3Ii8+Cjwvc3ZnPgo="
     alt=""
>

This can be particularly useful inside FluidEmail or to prevent unneeded HTTP calls.