--- title: "Image ViewHelper " manual: "LIA Imageserver" version: "1.2" permalink: "https://docs.typo3.org/permalink/lia/lia_imageserver:lia-liaimageserver-image@1.2" source: "ViewHelpers/LiaImageserver/Image.rst" modified: "2026-09-16T09:22:52+00:00" --- # Image ViewHelper `` This ViewHelper is based on the `f:image` ViewHelper and extends it with some additional attributes. ## Example ```html ``` You can also use the inline notation. ```html ``` **Arguments** > [!NOTE] > **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. The following arguments are available for the image ViewHelper: - **absolute** - *Type:* bool - *Default:* false Force absolute URL - **accesskey** - *Type:* string Keyboard shortcut to access this element - **additionalAttributes** - *Type:* array Additional tag attributes. They will be added directly to the resulting HTML tag. - **alt** - *Type:* string Specifies an alternate text for an image - **aria** - *Type:* array Additional aria-\* attributes. They will each be added with a "aria-" prefix. - **class** - *Type:* string CSS class(es) for this element - **crop** - *Type:* string|bool 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. - **decoding** - *Type:* string Provides an image decoding hint to the browser. Can be "sync", "async" or "auto" - **dir** - *Type:* string Text direction for this HTML element. Allowed strings: "ltr" (left to right), "rtl" (right to left) - **enableWebPSupport** - *Type:* boolean - *Default:* false Enable image webp support - **fetchPriority** - *Type:* string A string representing the priority hint. Possible values are:. "high", "low" or "auto" - **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.width for possible options. - **id** - *Type:* string Unique (in this file) identifier for this HTML element. - **image** - *Type:* object a FAL object (\\TYPO3\\CMS\\Core\\Resource\\File or \\TYPO3\\CMS\\Core\\Resource\\FileReference) - **imageServerOptions** - *Type:* array - *Default:* array ( ) Imageserver related options to be passed to. You can pass any valid Imageserver option. This options will overrule all other defined attributes - **ismap** - *Type:* string Specifies an image as a server-side image-map. Rarely used. Look at usemap instead - **lang** - *Type:* string Language for this element. Use short names specified in RFC 1766 - **loading** - *Type:* string Native lazy-loading for images property. Can be "lazy", "eager" or "auto" - **longdesc** - *Type:* string Specifies the URL to a document that contains a long description of an image - **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 - **objectFit** - *Type:* string Polyfill object fit mode - **objectPosition** - *Type:* string Polyfill object position - **onclick** - *Type:* string JavaScript evaluated for the onclick event - **passThrough** - *Type:* boolean - *Default:* false If you have to skip the imageserver set this argument to \`true\`. - **respectImageWidth** - *Type:* int - *Default:* 0 If set source-set definitions will be processed to ensure not to exceed the given image width - **respectImageWidthClasses** - *Type:* array - *Default:* array ( 0 => 'staticimage', 1 => 'u-respect-image-width', ) If respectImageWidh is set, this classes will be applied to the IMG tag - **sizes** - *Type:* array - *Default:* array ( ) Define here the sizes for the diffrent viewports. - **sourceSets** - *Type:* array - *Default:* array ( ) Source set configuration, make sure you always provide a default source set - **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 - **style** - *Type:* string Individual CSS styles for this element - **tabindex** - *Type:* integer Specifies the tab order of this element - **title** - *Type:* string Tooltip text of element - **treatIdAsReference** - *Type:* bool - *Default:* false If you use an UID in the \`src\` attribute you have to set this argument to \`true\` to get an result. - **usemap** - *Type:* string Specifies an image as a client-side image-map - **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 for possible options.