Documentation Index
Fetch the complete documentation index at: https://mintlify.com/filamentphp/filament/llms.txt
Use this file to discover all available pages before exploring further.
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')
- 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
Set the filesystem disk where images are stored.ImageEntry::make('avatar')
->disk('s3')
Set the visibility of images (public or private).ImageEntry::make('avatar')
->visibility('public')
Control whether to check if files exist before displaying.ImageEntry::make('avatar')
->checkFileExistence(false)
Size and Shape
Set the width of the image.ImageEntry::make('header_image')
->imageWidth(200)
Set the height of the image.ImageEntry::make('header_image')
->imageHeight(100)
Set both width and height to the same value.ImageEntry::make('avatar')
->imageSize(40)
Display the image with a 1:1 aspect ratio.ImageEntry::make('avatar')
->imageHeight(40)
->square()
Display the image as a circle, useful for avatars.ImageEntry::make('avatar')
->imageSize(40)
->circular()
Default Image
Set a default image URL to display when no image exists.ImageEntry::make('avatar')
->defaultImageUrl(url('storage/avatars/default.jpg'))
Multiple Images
Display multiple images as overlapping stack.ImageEntry::make('team.avatars')
->imageSize(40)
->circular()
->stacked()
Set the overlap amount for stacked images (0-8).ImageEntry::make('team.avatars')
->stacked()
->overlap(2)
Set the ring width for stacked images (0-8).ImageEntry::make('team.avatars')
->stacked()
->ring(3)
Limit the maximum number of images displayed.ImageEntry::make('team.avatars')
->stacked()
->limit(5)
Show the count of remaining images when limited.ImageEntry::make('team.avatars')
->stacked()
->limit(3)
->limitedRemainingText()
limitedRemainingTextSize()
Set the size of the remaining count text.use Filament\Support\Enums\TextSize;
ImageEntry::make('team.avatars')
->stacked()
->limit(3)
->limitedRemainingText(size: TextSize::Large)
limitedRemainingTextSeparate()
Display the remaining count separately from the stack.ImageEntry::make('team.avatars')
->stacked()
->limit(3)
->limitedRemainingText()
->limitedRemainingTextSeparate()
HTML Attributes
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)