--- title: "Image ViewHelper " manual: "Fluid ViewHelper Reference" version: "13.4" permalink: "https://docs.typo3.org/permalink/t3viewhelper:typo3-fluid-image@13.4" source: "Global/Image.rst" modified: "2026-09-17T09:07:45+00:00" --- # Image ViewHelper `` ViewHelper to resize, crop or convert a given image (if required) and render the corresponding HTML `` tag showing the processed image. 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. Go to the source code of this ViewHelper: [ImageViewHelper.php (GitHub)](https://github.com/TYPO3/typo3/blob/main/typo3/sysext/fluid/Classes/ViewHelpers/ImageViewHelper.php). **Table of contents** - [Argument src - displaying images from extension assets](https://docs.typo3.org/permalink/t3viewhelper:argument-src-displaying-images-from-extension-assets@13.4) - [Argument image - display images from the folder fileadmin / from FAL](https://docs.typo3.org/permalink/t3viewhelper:argument-image-display-images-from-the-folder-fileadmin-from-fal@13.4) - [Using the UID of the database entry directly](https://docs.typo3.org/permalink/t3viewhelper:using-the-uid-of-the-database-entry-directly@13.4) - [Displaying an image using its typolink string](https://docs.typo3.org/permalink/t3viewhelper:displaying-an-image-using-its-typolink-string@13.4) - [Embedding SVG files with the base64 attribute](https://docs.typo3.org/permalink/t3viewhelper:embedding-svg-files-with-the-base64-attribute@13.4) - [Arguments of the ViewHelper](https://docs.typo3.org/permalink/t3viewhelper:arguments-of-the-f-image-viewhelper@13.4) ## Argument src - displaying images from extension assets Images used for design purposes and not content purposes are commonly shipped in an extension. These images cannot be edited by backend users. They can be displayed using the `` ViewHelper using the [src](https://docs.typo3.org/permalink/t3viewhelper:viewhelper-argument-typo3-cms-fluid-viewhelpers-imageviewhelper-src@13.4) argument and `EXT:` syntax: ```html ``` In the extension the assets **must** be stored under `Resources/Public/` or a subfolder of this folder. If you installed the extension via Composer **before** it had a folder of that exact name, reinstall it so that the symlinks in folder `public/_assets` are correctly created for you. > [!NOTE] > Avoid using image operations such as the arguments > [width](https://docs.typo3.org/permalink/t3viewhelper:viewhelper-argument-typo3-cms-fluid-viewhelpers-imageviewhelper-width@13.4) or > [crop](https://docs.typo3.org/permalink/t3viewhelper:viewhelper-argument-typo3-cms-fluid-viewhelpers-imageviewhelper-crop@13.4) > with images included from an extensions' assets. Each > non-FAL image operation creates a "fake" FAL record, which may lead to problems. ## Argument image - display images from the folder fileadmin / from FAL Folders from inside the folder `fileadmin` are usually accessed using the [file abstraction layer (FAL)](https://docs.typo3.org/m/typo3/reference-coreapi/13.4/en-us/ApiOverview/Fal/Index.html#fal_introduction). For example, if you want to display an image that is attached to a content element, the content element typically stores a reference count of attached images in its `media` field. Intermediate tables are then used to attach the actual image to the content elements. This allows backend users to move or rename files, without the files connection being lost in the content element. ### FLUIDTEMPLATE and data processors and images In a TypoScript [FLUIDTEMPLATE](https://docs.typo3.org/m/typo3/reference-typoscript/13.4/en-us/ContentObjects/Fluidtemplate/Index.html#cobj-template) you can use the [files data processor](https://docs.typo3.org/m/typo3/reference-typoscript/13.4/en-us/DataProcessing/FilesProcessor.html#FilesProcessor) to display an image with the `` ViewHelper. See [Example: Render the images stored in field image](https://docs.typo3.org/m/typo3/reference-typoscript/13.4/en-us/DataProcessing/FilesProcessor.html#FilesProcessor-example-render-image) in the TypoScript reference. You can then use the [image](https://docs.typo3.org/permalink/t3viewhelper:viewhelper-argument-typo3-cms-fluid-viewhelpers-imageviewhelper-image@13.4) argument to pass the `File` or `FileReference` provided by the TypoScript data processor to the ViewHelper. ```html ``` The FAL will scale the image and convert it to a web format if necessary (for example from a pdf to a png). The `` ViewHelper generates a HTML `` tag with the correct paths, etc. ### Images from Extbase models in Fluid In Extbase models you can use fields of type `\TYPO3\CMS\Extbase\Persistence\ObjectStorage` with the TCA type [File](https://docs.typo3.org/m/typo3/reference-tca/13.4/en-us/ColumnsConfig/Type/File/Index.html#columns-file). When you are looping through the object storage, each element will be of type `\TYPO3\CMS\Extbase\Domain\Model\FileReference`. They can be used with the [image](https://docs.typo3.org/permalink/t3viewhelper:viewhelper-argument-typo3-cms-fluid-viewhelpers-imageviewhelper-image@13.4) argument: ```html ``` If the field should only contain a maximum of one image ([maxitems=1](https://docs.typo3.org/m/typo3/reference-tca/13.4/en-us/ColumnsConfig/Type/File/Index.html#confval-file-maxitems)), you can display the image simply by selecting the first array element: ```html ``` ## Using the UID of the database entry directly If you have the UID of the **sys_file_reference** table (preferred) you have to set [treatIdAsReference](https://docs.typo3.org/permalink/t3viewhelper:viewhelper-argument-typo3-cms-fluid-viewhelpers-imageviewhelper-treatidasreference@13.4) to true and pass the UID of the file reference to the [src](https://docs.typo3.org/permalink/t3viewhelper:viewhelper-argument-typo3-cms-fluid-viewhelpers-imageviewhelper-src@13.4) argument. If only the UID of the **sys_file** table is available, you can pass this value to the [src](https://docs.typo3.org/permalink/t3viewhelper:viewhelper-argument-typo3-cms-fluid-viewhelpers-imageviewhelper-src@13.4) argument of the ViewHelper and `treatIdAsReference` can be kept as the default value (false). In this case no data from the file reference, such as default cropping or overrides for alt text and description, will be available. **packages/my_extension/Resources/Private/Templates/Media/Image.fluid.html** ```html ``` ## Displaying an image using its typolink string If the file is configured as a typolink, for example from a TCA field of type [Link](https://docs.typo3.org/m/typo3/reference-tca/13.4/en-us/ColumnsConfig/Type/Link/Index.html#columns-link), you can use the typolink string, starting with `t3://file`, as [src](https://docs.typo3.org/permalink/t3viewhelper:viewhelper-argument-typo3-cms-fluid-viewhelpers-imageviewhelper-src@13.4): ```html ``` ## Embedding SVG files with the base64 attribute When the [base64](https://docs.typo3.org/permalink/t3viewhelper:viewhelper-argument-typo3-cms-fluid-viewhelpers-imageviewhelper-base64@13.4) argument is set to true, the resulting image tag will contain the source of the image in a base64 encoded form. **packages/my_extension/Resources/Private/Templates/Media/Image.fluid.html** ```html ``` This will result in the HTML tag providing the image encoded in base64. **HTML output** ```html ``` This can be particularly useful inside [FluidEmail](https://docs.typo3.org/m/typo3/reference-coreapi/13.4/en-us/ApiOverview/Mail/Index.html#mail-fluid-email) or to prevent unnecessary HTTP calls. ## Arguments of the `` ViewHelper > **Allows arbitrary arguments** > > This ViewHelper allows you to pass arbitrary arguments not defined below > directly to the HTML tag created. This includes custom `data-` arguments. - **absolute** - *Type:* bool - *Default:* false Force absolute URL - **additionalAttributes** - *Type:* array Additional tag attributes. They will be added directly to the resulting HTML tag. - **aria** - *Type:* array Additional aria-\* attributes. They will each be added with a "aria-" prefix. - **base64** - *Type:* bool - *Default:* false Adds the image data base64-encoded inline to the image‘s "src" attribute. Useful for FluidEmail templates. - **crop** - *Type:* string|bool|array overrule cropping of image (setting to FALSE disables the cropping set in FileReference) - **cropVariant** - *Type:* string - *Default:* 'default' select a cropping variant, in case multiple croppings have been specified or stored in FileReference - **data** - *Type:* array Additional data-\* attributes. They will each be added with a "data-" prefix. - **fileExtension** - *Type:* string Custom file extension to use - **height** - *Type:* string height of the image. This can be a numeric value representing the fixed height of the image in pixels. But you can also perform simple calculations by adding "m" or "c" to the value. See imgResource.height in the TypoScript Reference https://docs.typo3.org/permalink/t3tsref:confval-imgresource-height for possible options. - **image** - *Type:* object a FAL object (\\TYPO3\\CMS\\Core\\Resource\\File or \\TYPO3\\CMS\\Core\\Resource\\FileReference) - **maxHeight** - *Type:* int maximum height of the image - **maxWidth** - *Type:* int maximum width of the image - **minHeight** - *Type:* int minimum height of the image - **minWidth** - *Type:* int minimum width of the image - **src** - *Type:* string - *Default:* '' a path to a file, a combined FAL identifier or an uid (int). If $treatIdAsReference is set, the integer is considered the uid of the sys_file_reference record. If you already got a FAL object, consider using the $image parameter instead - **treatIdAsReference** - *Type:* bool - *Default:* false given src argument is a sys_file_reference record - **width** - *Type:* string width of the image. This can be a numeric value representing the fixed width of the image in pixels. But you can also perform simple calculations by adding "m" or "c" to the value. See imgResource.width in the TypoScript Reference on https://docs.typo3.org/permalink/t3tsref:confval-imgresource-width for possible options.