Laravel Filament视图与编辑页面图片不显示问题排查

常见原因 #

• 视图、编辑页面的图片组件未正确配置磁盘（disk）与存储路径
• 未生成storage到public的软链接，导致外部无法访问storage内的文件
• 数据库中存储的图片路径格式错误（比如存了绝对路径或未对应public磁盘的相对路径）

解决办法 #

1. 确认生成Storage软链接 #

在项目根目录执行命令，将storage/app/public映射到public/storage，这是外部访问storage文件的必要步骤：

php artisan storage:link

2. 修正Resource中Form与Show的图片组件配置 #

确保在form()（编辑页）和show()（视图页）中，图片组件指定了正确的磁盘和存储目录：

编辑页（Form）配置示例

Forms\Components\FileUpload::make('venue_photo')
    ->disk('public') // 指定使用public磁盘
    ->directory('venue_photos') // 对应存储目录
    ->image() // 标记为图片类型
    ->previewable(true) // 启用预览功能

视图页（Show）配置示例

Forms\Components\Image::make('venue_photo')
    ->disk('public') // 必须指定public磁盘
    ->width(200) // 设置预览宽度

完整VenueResource关键代码片段

class VenueResource extends Resource
{
    protected static ?string $model = Venue::class;

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                // 其他字段...
                Forms\Components\FileUpload::make('venue_photo')
                    ->disk('public')
                    ->directory('venue_photos')
                    ->image()
                    ->previewable(true),
            ]);
    }

    public static function show(Show $show): Show
    {
        return $show
            ->schema([
                // 其他字段...
                Forms\Components\Image::make('venue_photo')
                    ->disk('public')
                    ->width(200),
            ]);
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                // 其他字段...
                Tables\Columns\ImageColumn::make('venue_photo')
                    ->disk('public')
                    ->width(50),
            ]);
    }
}

3. 检查数据库存储路径 #

确保数据库中venue_photo字段存储的是相对路径（例如venue_photos/abc.jpg），而非绝对路径或包含storage/前缀的路径。Filament会基于指定的磁盘自动拼接正确的访问URL。

内容的提问来源于stack exchange，提问作者ClaudioZ