DOCS
DOCS

Languages

Version

Theme

信息列表

Image entry

简介

信息列表可以基于 Entry 状态中的路径渲染图片：

use Filament\Infolists\Components\ImageEntry;

ImageEntry::make('header_image')

本例中，header_image 状态值为 posts/header-images/4281246003439.jpg，这是相对于存储磁盘根目录的路径。存储磁盘在配置文件中定义，默认为 local。你可以设置 FILESYSTEM_DISK 环境变量修改它。

此外，该状态值也可以是图片的绝对 URL 路径，如 https://example.com/images/header.jpg。

Image entry

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:

use Filament\Infolists\Components\ImageEntry;

ImageEntry::make('header_image')
    ->alt('Article header image')
As well as allowing a static value, the alt() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters, including the $state of the current image, which is useful when the entry renders multiple images. 了解更多 utility 注入详情。
Utility 类型 参数 描述
Entry Filament\Infolists\Components\Entry $component The current entry component instance.
Get function Filament\Schemas\Components\Utilities\Get $get A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire Livewire\Component $livewire The Livewire component instance.
Eloquent model FQN ?string<Illuminate\Database\Eloquent\Model> $model The Eloquent model FQN for the current schema.
Operation string $operation The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record ?Illuminate\Database\Eloquent\Model $record The Eloquent record for the current schema.
State mixed $state The current value of the entry.

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.

NOTE

When an image links to a URL, 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.

管理图片磁盘

默认的存储磁盘在配置文件中定义，默认情况下使用 local。你也可以设置 FILESYSTEM_DISK 环境变量修改它。如果你想修改所用磁盘，可以传递自定义磁盘名到 disk() 方法：

use Filament\Infolists\Components\ImageEntry;

ImageEntry::make('header_image')
    ->disk('s3')
除了允许静态值之外，disk() 方法也接受函数以动态计算其值。你可以将各种 Utility 作为参数注入到该函数中。 了解更多 utility 注入详情。
Utility 类型 参数 描述
Entry Filament\Infolists\Components\Entry $component The current entry component instance.
Get function Filament\Schemas\Components\Utilities\Get $get A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire Livewire\Component $livewire The Livewire component instance.
Eloquent model FQN ?string<Illuminate\Database\Eloquent\Model> $model The Eloquent model FQN for the current schema.
Operation string $operation The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record ?Illuminate\Database\Eloquent\Model $record The Eloquent record for the current schema.
State mixed $state The current value of the entry.

公共图片

默认情况下，Filament 将为文件系统中图像生成临时 URL，除非磁盘设置为 public。如果你的图像存储在公共磁盘中，你可以将 visibility() 设置为 public：

use Filament\Infolists\Components\ImageEntry;

ImageEntry::make('header_image')
    ->visibility('public')
除了允许静态值之外，visibility() 方法也接受函数以动态计算其值。你可以将各种 Utility 作为参数注入到该函数中。 了解更多 utility 注入详情。
Utility 类型 参数 描述
Entry Filament\Infolists\Components\Entry $component The current entry component instance.
Get function Filament\Schemas\Components\Utilities\Get $get A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire Livewire\Component $livewire The Livewire component instance.
Eloquent model FQN ?string<Illuminate\Database\Eloquent\Model> $model The Eloquent model FQN for the current schema.
Operation string $operation The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record ?Illuminate\Database\Eloquent\Model $record The Eloquent record for the current schema.
State mixed $state The current value of the entry.

自定义大小

你可以将图片宽高传入 imageWidth() 和 imageHeight() 中，或者将二者同时传入给 imageSize()，来自定义图片大小：

use Filament\Infolists\Components\ImageEntry;

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

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

ImageEntry::make('author.avatar')
    ->imageSize(40)
除了允许静态值之外，imageWidth()、imageHeight() 和 imageSize() 方法也接受函数来动态计算它们的值。你可以将各种 Utility 作为参数注入到这些函数中。 了解更多 utility 注入详情。
Utility 类型 参数 描述
Entry Filament\Infolists\Components\Entry $component The current entry component instance.
Get function Filament\Schemas\Components\Utilities\Get $get A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire Livewire\Component $livewire The Livewire component instance.
Eloquent model FQN ?string<Illuminate\Database\Eloquent\Model> $model The Eloquent model FQN for the current schema.
Operation string $operation The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record ?Illuminate\Database\Eloquent\Model $record The Eloquent record for the current schema.
State mixed $state The current value of the entry.
Image entry with custom size

方形图片

你可以使用 1:1 比例尺展示图片：

use Filament\Infolists\Components\ImageEntry;

ImageEntry::make('author.avatar')
    ->imageHeight(40)
    ->square()
Square image entry

此外，你也可以传入一个布尔值，控制图片是否为方形：

use Filament\Infolists\Components\ImageEntry;

ImageEntry::make('author.avatar')
    ->imageHeight(40)
    ->square(FeatureFlag::active())
除了允许静态值之外，square() 方法也接受函数以动态计算其值。你可以将各种 Utility 作为参数注入到该函数中。 了解更多 utility 注入详情。
Utility 类型 参数 描述
Entry Filament\Infolists\Components\Entry $component The current entry component instance.
Get function Filament\Schemas\Components\Utilities\Get $get A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire Livewire\Component $livewire The Livewire component instance.
Eloquent model FQN ?string<Illuminate\Database\Eloquent\Model> $model The Eloquent model FQN for the current schema.
Operation string $operation The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record ?Illuminate\Database\Eloquent\Model $record The Eloquent record for the current schema.
State mixed $state The current value of the entry.

圆形图片

你可以将图片设为圆形，这对渲染头像相当有用：

use Filament\Infolists\Components\ImageEntry;

ImageEntry::make('author.avatar')
    ->imageHeight(40)
    ->circular()
Circular image entry

此外，你也可以传入一个布尔值，控制图片是否为圆形：

use Filament\Infolists\Components\ImageEntry;

ImageEntry::make('author.avatar')
    ->imageHeight(40)
    ->circular(FeatureFlag::active())
除了允许静态值之外，circular() 方法也接受函数以动态计算其值。你可以将各种 Utility 作为参数注入到该函数中。 了解更多 utility 注入详情。
Utility 类型 参数 描述
Entry Filament\Infolists\Components\Entry $component The current entry component instance.
Get function Filament\Schemas\Components\Utilities\Get $get A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire Livewire\Component $livewire The Livewire component instance.
Eloquent model FQN ?string<Illuminate\Database\Eloquent\Model> $model The Eloquent model FQN for the current schema.
Operation string $operation The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record ?Illuminate\Database\Eloquent\Model $record The Eloquent record for the current schema.
State mixed $state The current value of the entry.

添加默认图片 URL

将一个 URL 传入到 defaultImageUrl() 方法中，你可以在图片还不存在时，展示占位符图片：

use Filament\Infolists\Components\ImageEntry;

ImageEntry::make('header_image')
    ->defaultImageUrl(url('storage/posts/header-images/default.jpg'))
除了允许静态值之外，defaultImageUrl() 方法也接受函数以动态计算其值。你可以将各种 Utility 作为参数注入到该函数中。 了解更多 utility 注入详情。
Utility 类型 参数 描述
Entry Filament\Infolists\Components\Entry $component The current entry component instance.
Get function Filament\Schemas\Components\Utilities\Get $get A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire Livewire\Component $livewire The Livewire component instance.
Eloquent model FQN ?string<Illuminate\Database\Eloquent\Model> $model The Eloquent model FQN for the current schema.
Operation string $operation The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record ?Illuminate\Database\Eloquent\Model $record The Eloquent record for the current schema.
State mixed $state The current value of the entry.

堆叠图片

使用 stacked() 你可以将多个图像显示为重叠图像的堆栈：

use Filament\Infolists\Components\ImageEntry;

ImageEntry::make('colleagues.avatar')
    ->imageHeight(40)
    ->circular()
    ->stacked()
Stacked image entry

此外，你也可以传入一个布尔值，控制图片是否堆叠：

use Filament\Infolists\Components\ImageEntry;

ImageEntry::make('colleagues.avatar')
    ->imageHeight(40)
    ->circular()
    ->stacked(FeatureFlag::active())
除了允许静态值之外，stacked() 方法也接受函数以动态计算其值。你可以将各种 Utility 作为参数注入到该函数中。 了解更多 utility 注入详情。
Utility 类型 参数 描述
Entry Filament\Infolists\Components\Entry $component The current entry component instance.
Get function Filament\Schemas\Components\Utilities\Get $get A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire Livewire\Component $livewire The Livewire component instance.
Eloquent model FQN ?string<Illuminate\Database\Eloquent\Model> $model The Eloquent model FQN for the current schema.
Operation string $operation The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record ?Illuminate\Database\Eloquent\Model $record The Eloquent record for the current schema.
State mixed $state The current value of the entry.

自定义堆叠环宽度

默认环宽为 3，不过你可以自定义将其设为 0 到 8：

use Filament\Infolists\Components\ImageEntry;

ImageEntry::make('colleagues.avatar')
    ->imageHeight(40)
    ->circular()
    ->stacked()
    ->ring(5)
Image entry with stacked ring width
除了允许静态值之外，ring() 方法也接受函数以动态计算其值。你可以将各种 Utility 作为参数注入到该函数中。 了解更多 utility 注入详情。
Utility 类型 参数 描述
Entry Filament\Infolists\Components\Entry $component The current entry component instance.
Get function Filament\Schemas\Components\Utilities\Get $get A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire Livewire\Component $livewire The Livewire component instance.
Eloquent model FQN ?string<Illuminate\Database\Eloquent\Model> $model The Eloquent model FQN for the current schema.
Operation string $operation The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record ?Illuminate\Database\Eloquent\Model $record The Eloquent record for the current schema.
State mixed $state The current value of the entry.

自定义堆叠数

默认的堆叠数为 4，不过你可以使用 0 到 8 之间的数对其进行自定义：

use Filament\Infolists\Components\ImageEntry;

ImageEntry::make('colleagues.avatar')
    ->imageHeight(40)
    ->circular()
    ->stacked()
    ->overlap(2)
Image entry with stacked overlap
除了允许静态值之外，overlap() 方法也接受函数以动态计算其值。你可以将各种 Utility 作为参数注入到该函数中。 了解更多 utility 注入详情。
Utility 类型 参数 描述
Entry Filament\Infolists\Components\Entry $component The current entry component instance.
Get function Filament\Schemas\Components\Utilities\Get $get A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire Livewire\Component $livewire The Livewire component instance.
Eloquent model FQN ?string<Illuminate\Database\Eloquent\Model> $model The Eloquent model FQN for the current schema.
Operation string $operation The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record ?Illuminate\Database\Eloquent\Model $record The Eloquent record for the current schema.
State mixed $state The current value of the entry.

设置限制

使用 limit()，你可以限制你要显示的图片数量最大值：

use Filament\Infolists\Components\ImageEntry;

ImageEntry::make('colleagues.avatar')
    ->imageHeight(40)
    ->circular()
    ->stacked()
    ->limit(3)
除了允许静态值之外，limit() 方法也接受函数以动态计算其值。你可以将各种 Utility 作为参数注入到该函数中。 了解更多 utility 注入详情。
Utility 类型 参数 描述
Entry Filament\Infolists\Components\Entry $component The current entry component instance.
Get function Filament\Schemas\Components\Utilities\Get $get A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire Livewire\Component $livewire The Livewire component instance.
Eloquent model FQN ?string<Illuminate\Database\Eloquent\Model> $model The Eloquent model FQN for the current schema.
Operation string $operation The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record ?Illuminate\Database\Eloquent\Model $record The Eloquent record for the current schema.
State mixed $state The current value of the entry.
Limited image entry

显示剩余图片数

当设置限制时，你也可以传递 limitedRemainingText() 显示剩余的图片数量：

use Filament\Infolists\Components\ImageEntry;

ImageEntry::make('colleagues.avatar')
    ->imageHeight(40)
    ->circular()
    ->stacked()
    ->limit(3)
    ->limitedRemainingText()
Limited image entry with remaining text

此外，你也可以传入一个布尔值，控制是否显示剩余数：

use Filament\Infolists\Components\ImageEntry;

ImageEntry::make('colleagues.avatar')
    ->imageHeight(40)
    ->circular()
    ->stacked()
    ->limit(3)
    ->limitedRemainingText(FeatureFlag::active())
除了允许静态值之外，limitedRemainingText() 方法也接受函数以动态计算其值。你可以将各种 Utility 作为参数注入到该函数中。 了解更多 utility 注入详情。
Utility 类型 参数 描述
Entry Filament\Infolists\Components\Entry $component The current entry component instance.
Get function Filament\Schemas\Components\Utilities\Get $get A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire Livewire\Component $livewire The Livewire component instance.
Eloquent model FQN ?string<Illuminate\Database\Eloquent\Model> $model The Eloquent model FQN for the current schema.
Operation string $operation The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record ?Illuminate\Database\Eloquent\Model $record The Eloquent record for the current schema.
State mixed $state The current value of the entry.

自定义剩余数文本大小

默认情况下，剩余文本的大小是 TextSize::Small。你可以使用 size 参数将其自定义为 TextSize::ExtraSmall、TextSize::Medium 或 TextSize::Large：

use Filament\Infolists\Components\ImageEntry;
use Filament\Support\Enums\TextSize;

ImageEntry::make('colleagues.avatar')
    ->imageHeight(40)
    ->circular()
    ->stacked()
    ->limit(3)
    ->limitedRemainingText(size: TextSize::Large)
除了允许静态值之外，limitedRemainingText() 方法也接受函数以动态计算其值。你可以将各种 Utility 作为参数注入到该函数中。 了解更多 utility 注入详情。
Utility 类型 参数 描述
Entry Filament\Infolists\Components\Entry $component The current entry component instance.
Get function Filament\Schemas\Components\Utilities\Get $get A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire Livewire\Component $livewire The Livewire component instance.
Eloquent model FQN ?string<Illuminate\Database\Eloquent\Model> $model The Eloquent model FQN for the current schema.
Operation string $operation The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record ?Illuminate\Database\Eloquent\Model $record The Eloquent record for the current schema.
State mixed $state The current value of the entry.

阻止检测文件存在与否

当加载完 Schma 后，它将自动检测图片是否存在，以防止文件缺失错误。这全部在后台完成。当远程存储许多图片时，这可能会非常耗时。可以使用 checkFileExistence(false) 方法禁用此功能：

use Filament\Infolists\Components\ImageEntry;

ImageEntry::make('attachment')
    ->checkFileExistence(false)
除了允许静态值之外，checkFileExistence() 方法也接受函数以动态计算其值。你可以将各种 Utility 作为参数注入到该函数中。 了解更多 utility 注入详情。
Utility 类型 参数 描述
Entry Filament\Infolists\Components\Entry $component The current entry component instance.
Get function Filament\Schemas\Components\Utilities\Get $get A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire Livewire\Component $livewire The Livewire component instance.
Eloquent model FQN ?string<Illuminate\Database\Eloquent\Model> $model The Eloquent model FQN for the current schema.
Operation string $operation The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record ?Illuminate\Database\Eloquent\Model $record The Eloquent record for the current schema.
State mixed $state The current value of the entry.

添加额外的 HTML 属性到图片中

通过 extraImgAttributes() 方法，你可以传递额外的 HTML 属性给 <img> 元素。这些属性以数组的形式表示，数组的键为属性名，数组值是属性值：

use Filament\Infolists\Components\ImageEntry;

ImageEntry::make('logo')
    ->extraImgAttributes([
        'alt' => 'Logo',
        'loading' => 'lazy',
    ])
除了允许静态值之外，extraImgAttributes() 方法也接受函数以动态计算其值。你可以将各种 Utility 作为参数注入到该函数中。 了解更多 utility 注入详情。
Utility 类型 参数 描述
Entry Filament\Infolists\Components\Entry $component The current entry component instance.
Get function Filament\Schemas\Components\Utilities\Get $get A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire Livewire\Component $livewire The Livewire component instance.
Eloquent model FQN ?string<Illuminate\Database\Eloquent\Model> $model The Eloquent model FQN for the current schema.
Operation string $operation The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record ?Illuminate\Database\Eloquent\Model $record The Eloquent record for the current schema.
State mixed $state The current value of the entry.

默认情况下，多次调用 extraImgAttributes() 将会覆盖之前的属性设置。如果你想要合并属性，可以传入 merge:true 给该方法。

Edit on GitHub

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

Previous
Icon entry
Next
Color entry
Your logo here? 💖