图片字段

在表格中展示图片也很简单:

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

ImageColumn::make('header_image')

对应的数据库字段必须包含图片路径，相对于存储盘根目录的相对路径。

#管理图片存储盘

默认情况下，pulbic 磁盘会被用于检索图片。你可以在 disk() 方法中传入自定义磁盘名：

use Filament\Tables\Columns\ImageColumn;
 
ImageColumn::make('header_image')->disk('s3')
use Filament\Tables\Columns\ImageColumn;

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

#私有图片

Filament 可以生成临时 URL，用来渲染临时私有图片，你可以在 visibility() 中设置 private:

use Filament\Tables\Columns\ImageColumn;
 
ImageColumn::make('header_image')->visibility('private')
use Filament\Tables\Columns\ImageColumn;

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

#正方形图片

可以使用 1:1 的高宽比展示图片 ：

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

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

#圆形图片

你可以将图片渲染成圆形，这适用于渲染头像：

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

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

#自定义 size

你可以传入宽度到 width()，传入高度到 height()，或者使用 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)

#添加默认图片 URL

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

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'))

#自定义属性

你可以使用 extraImgAttributes() 自定义图片的其他 HTML 属性：

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