Image column

Images can be easily displayed within your table:

use Filament\Tables\Columns\ImageColumn;
 
ImageColumn::make('header_image')
use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('header_image')

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

#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')
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')
use Filament\Tables\Columns\ImageColumn;

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

#Square image

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

use Filament\Tables\Columns\ImageColumn;
 
ImageColumn::make('author.avatar')->square()
use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('author.avatar')->square()

#Circular image

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

use Filament\Tables\Columns\ImageColumn;
 
ImageColumn::make('author.avatar')->circular()
use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('author.avatar')->circular()

#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)
use Filament\Tables\Columns\ImageColumn;

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

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

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

#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'))
use Filament\Tables\Columns\ImageColumn;

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

#Custom attributes

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

use Filament\Tables\Columns\ImageColumn;
 
ImageColumn::make('logo')
    ->extraImgAttributes(['title' => 'Company logo']),
use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('logo')
    ->extraImgAttributes(['title' => 'Company logo']),

Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion