Filament 3中JSON列图片展示问题：视图与编辑模态框不显示求助

1. 调整ProductResource中Form的FileUpload组件配置 #

由于你的image字段是数组格式（包含url和disk），需要修改FileUpload的配置，让它正确读取已有图片并生成预览：

Forms\Components\FileUpload::make('image')
    ->maxSize(1024)
    ->image()
    ->storeFiles(false)
    ->required()
    // 从模型的image数组中加载已有图片的URL
    ->loadStateFrom(fn (Product $record) => $record->image['url'] ?? null)
    // 设置图片预览地址
    ->previewUrl(fn (?Product $record) => $record?->image['url'] ?? null)
    // 上传新文件后，自动转换为你需要的数组格式
    ->afterStateUpdated(function (callable $set, $state) {
        if ($state) {
            $set('image', Helper::saveFile('/products', $state, 's3'));
        }
    })

2. 处理编辑页面的表单数据转换 #

在EditProduct.php中添加数据转换逻辑，确保编辑时新上传的文件能正确转为数组格式：

protected function mutateFormDataBeforeUpdate(array $data): array
{
    // 如果image是临时上传路径（字符串），转换为指定的数组格式
    if (is_string($data['image'])) {
        $data['image'] = Helper::saveFile('/products', $data['image'], 's3');
    }
    return $data;
}

3. 视图页面（ViewProduct）的图片显示 #

视图页面是只读状态，使用Image组件替代FileUpload来展示图片：

Forms\Components\Image::make('image.url')
    ->label('产品图片')
    // 可选：指定存储磁盘（如果需要Filament处理路径）
    ->disk(fn (Product $record) => $record->image['disk'] ?? 's3')

原理说明 #

• Filament的FileUpload默认适配字符串类型的文件路径，而你的image是数组，所以需要通过loadStateFrom手动指定读取image.url作为当前值。
• previewUrl用于在模态框中生成图片预览，直接返回image.url即可。
• 编辑时新上传的文件会是临时路径字符串，通过afterStateUpdated或mutateFormDataBeforeUpdate将其转换为你需要的url+disk数组格式。

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