---
title: "Uri.image ViewHelper <f:uri.image>"
manual: "Fluid ViewHelper Reference"
version: "14.3"
permalink: "https://docs.typo3.org/permalink/t3viewhelper:typo3-fluid-uri-image@14.3"
source: "Global/Uri/Image.rst"
rendered: "2026-09-27T06:57:21+00:00"
---

# Uri.image ViewHelper `<f:uri.image>` {#typo3-fluid-uri-image}

ViewHelper to resize, crop or convert a given image (if required) and return the URL to this processed file.

This ViewHelper should only be used for images within FAL storages, or where graphical operations shall be performed.

Note that when the contents of a non-FAL image are changed, an image may not show updated processed contents unless either the FAL record is updated/removed, or the temporary processed images are cleared.

Also note that image operations (cropping, scaling, converting) on non-FAL files 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.

For extension resource files, use `<f:uri.resource>` instead.

External URLs are not processed and just returned as is.

Go to the source code of this ViewHelper: [Uri\\ImageViewHelper.php (GitHub)](https://github.com/TYPO3/typo3/blob/main/typo3/sysext/fluid/Classes/ViewHelpers/Uri/ImageViewHelper.php).

<!-- TODO: no Markdown rendering for "versionchanged" -->

When working with srcset in HTML, the
Image.srcset ViewHelper <f:image.srcset>
simplifies previous manual implementations
using {f:uri.image} for each image size manually.

**Table of contents**

-   [Examples](https://docs.typo3.org/permalink/t3viewhelper:examples@14.3)
-   [Base 64](https://docs.typo3.org/permalink/t3viewhelper:base-64@14.3)
-   [Arguments of the <f:uri.image> ViewHelper](https://docs.typo3.org/permalink/t3viewhelper:arguments-of-the-f-uri-image-viewhelper@14.3)

## Examples {#typo3-fluid-uri-image-example}

### Default {#typo3-fluid-uri-image-default}

**packages/my_extension/Resources/Private/Templates/Blog/Show.fluid.html**

```html
<f:uri.image src="EXT:myext/Resources/Public/typo3_logo.png" />
```

Results in the following output within TYPO3 frontend:

`typo3conf/ext/myext/Resources/Public/typo3_logo.png`

and the following output inside TYPO3 backend:

`../typo3conf/ext/myext/Resources/Public/typo3_logo.png`

### Image object {#typo3-fluid-uri-image-image-object}

**packages/my_extension/Resources/Private/Templates/Blog/Show.fluid.html**

```html
<f:uri.image image="{imageObject}" />
```

Results in the following output within TYPO3 frontend:

`fileadmin/images/image.png`

and the following output inside TYPO3 backend:

`fileadmin/images/image.png`

### Inline notation {#typo3-fluid-uri-image-inline-notation}

**packages/my_extension/Resources/Private/Templates/Blog/Show.fluid.html**

```html
{f:uri.image(src: 'EXT:myext/Resources/Public/typo3_logo.png', minWidth: 30, maxWidth: 40)}
```

**Output**

```text
typo3temp/assets/images/[b4c0e7ed5c].png
```

Depending on your TYPO3s encryption key.

### Non existing image {#typo3-fluid-uri-image-non-existing-image}

**packages/my_extension/Resources/Private/Templates/Blog/Show.fluid.html**

```html
<f:uri.image src="NonExistingImage.png" />
```

**Output**

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

## Base 64 {#typo3-fluid-uri-image-base-64}

When the [base64](https://docs.typo3.org/permalink/t3viewhelper:viewhelper-argument-typo3-cms-fluid-viewhelpers-uri-imageviewhelper-base64@14.3)
argument is set to true, this ViewHelper returns a base 64 encoded version of the ressource.

```html
<img src="{f:uri.image(base64: 'true',
                       src:'EXT:backend/Resources/Public/Images/typo3_logo_orange.svg')}">
```

Will return the image encoded in base64:

```html
<img src="data:image/svg+xml;base64,PHN2...cuODQ4LTYuNzU3Ii8+Cjwvc3ZnPgo=">
```

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

## Arguments of the `<f:uri.image>` ViewHelper {#typo3-fluid-uri-image-arguments}

-   **absolute**

    -   *Type:* bool
    -   *Default:* false

    Force absolute URL

-   **base64**

    -   *Type:* bool
    -   *Default:* false

    Return a base64 encoded version of the image

-   **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

-   **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.

-   **image**

    -   *Type:* object

    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

-   **src**

    -   *Type:* string
    -   *Default:* ''

    src

-   **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 for possible options.