> ## Documentation Index
> Fetch the complete documentation index at: https://filament-34a8cf01.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Image column

> [!WARNING]
>
> You are currently viewing the documentation for Filament 4.x, which is a previous version of Filament.
>
> Looking for the current stable version? Visit the [5.x documentation](https://filament-34a8cf01.mintlify.site/5.x/tables/columns/image.md).

## Introduction

Tables can render images, based on the path in the state of the column:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('avatar')
```

In this case, the `avatar` state could contain `users/avatars/4281246003439.jpg`, which is relative to the root directory of the storage disk. The storage disk is defined in the [configuration file](https://filament-34a8cf01.mintlify.site/4.x/introduction/installation.md#publishing-configuration), `local` by default. You can also set the `FILESYSTEM_DISK` environment variable to change this.

Alternatively, the state could contain an absolute URL to an image, such as `https://example.com/images/avatar.jpg`.

Loading preview

![Image column](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/tables/columns/image/simple.jpg)

## Setting the alt text

You should set descriptive alt text on your images so that screen reader users understand what each image shows. Use the `alt()` method:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('avatar')
    ->alt('User avatar')
```

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/tables/columns/overview.md#column-utility-injection)
</details>

If you do not set any alt text, the image is rendered with an empty `alt` attribute, which marks it as decorative for assistive technology.

> [!WARNING]
>
> When an image [links to a URL](https://filament-34a8cf01.mintlify.site/4.x/tables/columns/overview.md#opening-urls), its alt text becomes the accessible name of the link. Always set meaningful `alt()` text on linked images, otherwise screen reader users will encounter a link with no name.

## Managing the image disk

The default storage disk is defined in the [configuration file](https://filament-34a8cf01.mintlify.site/4.x/introduction/installation.md#publishing-configuration), `local` by default. You can also set the `FILESYSTEM_DISK` environment variable to change this. If you want to deviate from the default disk, you may pass a custom disk name to the `disk()` method:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('header_image')
    ->disk('s3')
```

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/tables/columns/overview.md#column-utility-injection)
</details>

## Public images

By default, Filament will generate temporary URLs to images in the filesystem, unless the [disk](#managing-the-image-disk) is set to `public`. If your images are stored in a public disk, you can set the `visibility()` to `public`:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('header_image')
    ->visibility('public')
```

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/tables/columns/overview.md#column-utility-injection)
</details>

## Customizing the size

You may customize the image size by passing a `imageWidth()` and `imageHeight()`, or both with `imageSize()`:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('header_image')
    ->imageWidth(200)

ImageColumn::make('header_image')
    ->imageHeight(50)

ImageColumn::make('avatar')
    ->imageSize(40)
```

Loading preview

![Image column with custom size](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/tables/columns/image/size.jpg)

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/tables/columns/overview.md#column-utility-injection)
</details>

### Square images

You may display the image using a 1:1 aspect ratio:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('avatar')
    ->imageHeight(40)
    ->square()
```

Loading preview

![Square image column](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/tables/columns/image/square.jpg)

Optionally, you may pass a boolean value to control if the image should be square or not:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('avatar')
    ->imageHeight(40)
    ->square(FeatureFlag::active())
```

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/tables/columns/overview.md#column-utility-injection)
</details>

## Circular images

You may make the image fully rounded, which is useful for rendering avatars:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('avatar')
    ->imageHeight(40)
    ->circular()
```

Loading preview

![Circular image column](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/tables/columns/image/circular.jpg)

Optionally, you may pass a boolean value to control if the image should be circular or not:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('avatar')
    ->imageHeight(40)
    ->circular(FeatureFlag::active())
```

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/tables/columns/overview.md#column-utility-injection)
</details>

## Adding a default image URL

You can display a placeholder image if one doesn't exist yet, by passing a URL to the `defaultImageUrl()` method:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('header_image')
    ->defaultImageUrl(url('storage/posts/header-images/default.jpg'))
```

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/tables/columns/overview.md#column-utility-injection)
</details>

## Stacking images

You may display multiple images as a stack of overlapping images by using `stacked()`:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('colleagues.avatar')
    ->imageHeight(40)
    ->circular()
    ->stacked()
```

Loading preview

![Stacked image column](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/tables/columns/image/stacked.jpg)

Optionally, you may pass a boolean value to control if the images should be stacked or not:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('colleagues.avatar')
    ->imageHeight(40)
    ->circular()
    ->stacked(FeatureFlag::active())
```

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/tables/columns/overview.md#column-utility-injection)
</details>

### Customizing the stacked ring width

No ring is displayed by default, but you may add one with a width from `0` to `8`:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('colleagues.avatar')
    ->imageHeight(40)
    ->circular()
    ->stacked()
    ->ring(5)
```

Loading preview

![Image column with stacked ring width](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/tables/columns/image/stacked-ring.jpg)

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/tables/columns/overview.md#column-utility-injection)
</details>

### Customizing the stacked overlap

The default overlap is `4`, but you may customize it to be from `0` to `8`:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('colleagues.avatar')
    ->imageHeight(40)
    ->circular()
    ->stacked()
    ->overlap(2)
```

Loading preview

![Image column with stacked overlap](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/tables/columns/image/stacked-overlap.jpg)

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/tables/columns/overview.md#column-utility-injection)
</details>

## Setting a limit

You may limit the maximum number of images you want to display by passing `limit()`:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('colleagues.avatar')
    ->imageHeight(40)
    ->circular()
    ->stacked()
    ->limit(3)
```

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/tables/columns/overview.md#column-utility-injection)
</details>

Loading preview

![Limited image column](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/tables/columns/image/limited.jpg)

### Showing the remaining images count

When you set a limit you may also display the count of remaining images by passing `limitedRemainingText()`.

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('colleagues.avatar')
    ->imageHeight(40)
    ->circular()
    ->stacked()
    ->limit(3)
    ->limitedRemainingText()
```

Loading preview

![Limited image column with remaining text](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/tables/columns/image/limited-remaining-text.jpg)

Optionally, you may pass a boolean value to control if the remaining text should be displayed or not:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('colleagues.avatar')
    ->imageHeight(40)
    ->circular()
    ->stacked()
    ->limit(3)
    ->limitedRemainingText(FeatureFlag::active())
```

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/tables/columns/overview.md#column-utility-injection)
</details>

#### Customizing the limited remaining text size

By default, the size of the remaining text is `TextSize::Small`. You can customize this to be `TextSize::ExtraSmall`, `TextSize::Medium` or `TextSize::Large` using the `size` parameter:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\ImageColumn;
use Filament\Support\Enums\TextSize;

ImageColumn::make('colleagues.avatar')
    ->imageHeight(40)
    ->circular()
    ->stacked()
    ->limit(3)
    ->limitedRemainingText(size: TextSize::Large)
```

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/tables/columns/overview.md#column-utility-injection)
</details>

## Prevent file existence checks

When the schema is loaded, it will automatically detect whether the images exist to prevent errors for missing files. This is all done on the backend. When using remote storage with many images, this can be time-consuming. You can use the `checkFileExistence(false)` method to disable this feature:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('attachment')
    ->checkFileExistence(false)
```

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/tables/columns/overview.md#column-utility-injection)
</details>

## Wrapping multiple images

Images can be set to wrap if they can't fit on one line, by setting `wrap()`:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('colleagues.avatar')
    ->circular()
    ->stacked()
    ->wrap()
```

> [!TIP]
>
> The "width" for wrapping is affected by the column label, so you may need to use a shorter or hidden label to wrap more tightly.

## Adding extra HTML attributes to the image

You can pass extra HTML attributes to the `<img>` element via the `extraImgAttributes()` method. The attributes should be represented by an array, where the key is the attribute name and the value is the attribute value:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('logo')
    ->extraImgAttributes([
        'alt' => 'Logo',
        'loading' => 'lazy',
    ])
```

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/tables/columns/overview.md#column-utility-injection)
</details>

By default, calling `extraImgAttributes()` multiple times will overwrite the previous attributes. If you wish to merge the attributes instead, you can pass `merge: true` to the method.

[Edit this page on GitHub](https://github.com/filamentphp/filament/edit/4.x/packages/tables/docs/02-columns/04-image.md)

## Sponsored by

[Your logo here](https://github.com/sponsors/danharrin)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.