Image Entry

Introduction

Image entries display images from URLs or file paths stored in your data source. They support both local filesystem storage and absolute URLs.

use Filament\Infolists\Components\ImageEntry;

ImageEntry::make('avatar')

The entry state can contain:

A relative path to the storage disk (e.g., avatars/user-123.jpg)
An absolute URL (e.g., https://example.com/avatar.jpg)
A data URI (e.g., data:image/png;base64,...)

Available Methods

Storage Configuration

string|Closure

Set the filesystem disk where images are stored.

ImageEntry::make('avatar')
    ->disk('s3')

string|Closure

Set the visibility of images (public or private).

ImageEntry::make('avatar')
    ->visibility('public')

bool|Closure

Control whether to check if files exist before displaying.

ImageEntry::make('avatar')
    ->checkFileExistence(false)

Size and Shape

int|string|Closure

Set the width of the image.

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

int|string|Closure

Set the height of the image.

ImageEntry::make('header_image')
    ->imageHeight(100)

int|string|Closure

Set both width and height to the same value.

ImageEntry::make('avatar')
    ->imageSize(40)

bool|Closure

Display the image with a 1:1 aspect ratio.

ImageEntry::make('avatar')
    ->imageHeight(40)
    ->square()

bool|Closure

Display the image as a circle, useful for avatars.

ImageEntry::make('avatar')
    ->imageSize(40)
    ->circular()

Default Image

string|Closure

Set a default image URL to display when no image exists.

ImageEntry::make('avatar')
    ->defaultImageUrl(url('storage/avatars/default.jpg'))

Multiple Images

bool|Closure

Display multiple images as overlapping stack.

ImageEntry::make('team.avatars')
    ->imageSize(40)
    ->circular()
    ->stacked()

int|Closure

Set the overlap amount for stacked images (0-8).

ImageEntry::make('team.avatars')
    ->stacked()
    ->overlap(2)

int|Closure

Set the ring width for stacked images (0-8).

ImageEntry::make('team.avatars')
    ->stacked()
    ->ring(3)

int|Closure

Limit the maximum number of images displayed.

ImageEntry::make('team.avatars')
    ->stacked()
    ->limit(5)

bool|Closure

Show the count of remaining images when limited.

ImageEntry::make('team.avatars')
    ->stacked()
    ->limit(3)
    ->limitedRemainingText()

TextSize|string|Closure

Set the size of the remaining count text.

use Filament\Support\Enums\TextSize;

ImageEntry::make('team.avatars')
    ->stacked()
    ->limit(3)
    ->limitedRemainingText(size: TextSize::Large)

bool|Closure

Display the remaining count separately from the stack.

ImageEntry::make('team.avatars')
    ->stacked()
    ->limit(3)
    ->limitedRemainingText()
    ->limitedRemainingTextSeparate()

HTML Attributes

array|Closure

Add extra HTML attributes to the img element.

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

Examples

User Avatar

ImageEntry::make('avatar')
    ->imageSize(40)
    ->circular()
    ->defaultImageUrl(url('storage/avatars/default.png'))

Product Images

ImageEntry::make('images')
    ->imageWidth(120)
    ->imageHeight(80)
    ->limit(4)
    ->limitedRemainingText()

Team Members

ImageEntry::make('team.members.avatar')
    ->imageSize(40)
    ->circular()
    ->stacked()
    ->limit(5)
    ->limitedRemainingText()
    ->ring(2)
    ->overlap(4)

S3 Storage

ImageEntry::make('header_image')
    ->disk('s3')
    ->visibility('public')
    ->imageWidth(300)
    ->imageHeight(200)

Optimized Loading

ImageEntry::make('product_image')
    ->imageWidth(150)
    ->extraImgAttributes([
        'alt' => 'Product image',
        'loading' => 'lazy',
    ])
    ->checkFileExistence(false)

Form Components

Table Components

Layout Components

Infolist Components

Introduction

Available Methods

Storage Configuration

Size and Shape

Default Image

Multiple Images

HTML Attributes

Examples

User Avatar

Product Images

Team Members

S3 Storage

Optimized Loading

​Introduction

​Available Methods

​Storage Configuration

​Size and Shape

​Default Image

​Multiple Images

​HTML Attributes

​Examples

​User Avatar

​Product Images

​Team Members

​S3 Storage

​Optimized Loading

Introduction

Available Methods

Storage Configuration

Size and Shape

Default Image

Multiple Images

HTML Attributes

Examples

User Avatar

Product Images

Team Members

S3 Storage

Optimized Loading