Skip to main content
Version: 3.0

Image column

Overview​

Images can be easily displayed within your table:

use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('avatar')

The column in the database must contain the path to the image, relative to the root directory of its storage disk.

Image column

Managing the image disk​

By default, the public disk will be used to retrieve images. You may pass a custom disk name to the disk() method:

use Filament\Tables\Columns\ImageColumn;

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

Private images​

Filament can generate temporary URLs to render private images, you may set the visibility() to private:

use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('header_image')
    ->visibility('private')

Customizing the size​

You may customize the image size by passing a width() and height(), or both with size():

use Filament\Tables\Columns\ImageColumn;

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

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

ImageColumn::make('author.avatar')
    ->size(40)

Square image​

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

use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('avatar')
    ->square()
Square image column

Circular image​

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

use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('avatar')
    ->circular()
Circular image column

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:

use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('avatar')
    ->defaultImageUrl(url('/images/placeholder.png'))

Stacking images​

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

use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('colleagues.avatar')
    ->circular()
    ->stacked()
Stacked image column

Customizing the stacked ring width​

The default ring width is 3, but you may customize it to be from 0 to 8:

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

Customizing the stacked overlap​

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

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

Setting a limit​

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

use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('colleagues.avatar')
    ->circular()
    ->stacked()
    ->limit(3)
Limited image column

Showing the remaining images count​

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

use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('colleagues.avatar')
    ->circular()
    ->stacked()
    ->limit(3)
    ->limitedRemainingText()
Limited image column with remaining text

Showing the limited remaining text separately​

By default, limitedRemainingText() will display the count of remaining images as a number stacked on the other images. If you prefer to show the count as a number after the images, you may use the isSeparate: true parameter:

use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('colleagues.avatar')
    ->circular()
    ->stacked()
    ->limit(3)
    ->limitedRemainingText(isSeparate: true)
Limited image column with remaining text separately

Customizing the limited remaining text size​

By default, the size of the remaining text is sm. You can customize this to be xs, md or lg using the size parameter:

use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('colleagues.avatar')
    ->circular()
    ->stacked()
    ->limit(3)
    ->limitedRemainingText(size: 'lg')

Custom attributes​

You may customize the extra HTML attributes of the image using extraImgAttributes():

use Filament\Tables\Columns\ImageColumn;

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

You can access the current record using a $record parameter:

use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('logo')
    ->extraImgAttributes(fn (Company $record): array => [
        'alt' => "{$record->name} logo",
    ]),