Image entry - 信息列表

简介

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

use Filament\Infolists\Components\ImageEntry;

ImageEntry::make('header_image')

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

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

管理图片磁盘

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

use Filament\Infolists\Components\ImageEntry;

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

除了允许静态值之外，disk() 方法也接受函数以动态计算其值。你可以将多个 utility 作为参数注入到该函数中。

Learn more about utility injection.

Utility	Type	Parameter	Description
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 作为参数注入到该函数中。

Learn more about utility injection.

Utility	Type	Parameter	Description
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 作为参数注入到这些函数中。

Learn more about utility injection.

Utility	Type	Parameter	Description
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.

方形图片

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

use Filament\Infolists\Components\ImageEntry;

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

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

use Filament\Infolists\Components\ImageEntry;

ImageEntry::make('author.avatar')
    ->imageHeight(40)
    ->square(FeatureFlag::active())

除了允许静态值之外，square() 方法也接受函数以动态计算其值。你可以将多个 utility 作为参数注入到该函数中。

Learn more about utility injection.

Utility	Type	Parameter	Description
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()

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

use Filament\Infolists\Components\ImageEntry;

ImageEntry::make('author.avatar')
    ->imageHeight(40)
    ->circular(FeatureFlag::active())

除了允许静态值之外，circular() 方法也接受函数以动态计算其值。你可以将多个 utility 作为参数注入到该函数中。

Learn more about utility injection.

Utility	Type	Parameter	Description
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 作为参数注入到该函数中。

Learn more about utility injection.

Utility	Type	Parameter	Description
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()

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

use Filament\Infolists\Components\ImageEntry;

ImageEntry::make('colleagues.avatar')
    ->imageHeight(40)
    ->circular()
    ->stacked(FeatureFlag::active())

除了允许静态值之外，stacked() 方法也接受函数以动态计算其值。你可以将多个 utility 作为参数注入到该函数中。

Learn more about utility injection.

Utility	Type	Parameter	Description
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)

除了允许静态值之外，ring() 方法也接受函数以动态计算其值。你可以将多个 utility 作为参数注入到该函数中。

Learn more about utility injection.

Utility	Type	Parameter	Description
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)

除了允许静态值之外，overlap() 方法也接受函数以动态计算其值。你可以将多个 utility 作为参数注入到该函数中。

Learn more about utility injection.

Utility	Type	Parameter	Description
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 作为参数注入到该函数中。

Learn more about utility injection.

Utility	Type	Parameter	Description
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.

显示剩余图片数

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

use Filament\Infolists\Components\ImageEntry;

ImageEntry::make('colleagues.avatar')
    ->imageHeight(40)
    ->circular()
    ->stacked()
    ->limit(3)
    ->limitedRemainingText()

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

use Filament\Infolists\Components\ImageEntry;

ImageEntry::make('colleagues.avatar')
    ->imageHeight(40)
    ->circular()
    ->stacked()
    ->limit(3)
    ->limitedRemainingText(FeatureFlag::active())

除了允许静态值之外，limitedRemainingText() 方法也接受函数以动态计算其值。你可以将多个 utility 作为参数注入到该函数中。

Learn more about utility injection.

Utility	Type	Parameter	Description
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 作为参数注入到该函数中。

Learn more about utility injection.

Utility	Type	Parameter	Description
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 作为参数注入到该函数中。

Learn more about utility injection.

Utility	Type	Parameter	Description
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 作为参数注入到该函数中。

Learn more about utility injection.

Utility	Type	Parameter	Description
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

#简介

#管理图片磁盘

#公共图片

#自定义大小

#方形图片

#圆形图片

#添加默认图片 URL

#堆叠图片

#自定义堆叠环宽度

#自定义堆叠数

#设置限制

#显示剩余图片数

#自定义剩余数文本大小

#阻止检测文件存在与否

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

简介

管理图片磁盘

公共图片

自定义大小

方形图片

圆形图片

添加默认图片 URL

堆叠图片

自定义堆叠环宽度

自定义堆叠数

设置限制

显示剩余图片数

自定义剩余数文本大小

阻止检测文件存在与否

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