Laravel/Filament向导表单中如何展示非上传类图片

核心思路 #

1. 在第一步表单验证通过后，调用API获取产品图片URL并存储到临时状态中
2. 在第二步通过ViewField读取临时状态里的URL，渲染图片展示

完整代码实现 #

向导表单类

use Filament\Forms\Components\ViewField;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Wizard;
use Filament\Forms\Form;
use Illuminate\Support\Facades\Http;

class ProductImportWizard extends Wizard
{
    public function form(Form $form): Form
    {
        return $form
            ->schema([
                // 第一步：输入产品编号并获取数据
                Wizard\Step::make('输入产品编号')
                    ->schema([
                        TextInput::make('product_sku')
                            ->label('产品编号')
                            ->required()
                            // 替换为你的产品编号验证规则
                            ->rules(['regex:/^PRO-\d{6}$/'])
                            ->afterValidation(function (callable $set, $state) {
                                // 调用外部API获取产品信息
                                try {
                                    $response = Http::timeout(10)->get("https://your-api-domain.com/api/products/{$state}");
                                    $productData = $response->json();

                                    // 将图片URL存入临时状态，供第二步使用
                                    $set('product_image_url', $productData['image_url'] ?? '');
                                } catch (\Exception $e) {
                                    // 处理API请求失败的情况
                                    $set('product_image_url', '');
                                    throw new \Filament\Forms\Components\ComponentException('获取产品信息失败，请检查编号是否正确');
                                }
                            }),
                    ]),

                // 第二步：展示图片供用户确认
                Wizard\Step::make('确认产品图片')
                    ->schema([
                        // 方式1：使用自定义Blade视图渲染（推荐，样式更易控制）
                        ViewField::make('product_image')
                            ->label('产品图片')
                            ->view('filament.components.product-preview-image', [
                                'imageUrl' => fn () => $this->getState()['product_image_url'] ?? '',
                            ]),

                        // 方式2：直接输出HTML（快速实现）
                        // ViewField::make('product_image')
                        //     ->label('产品图片')
                        //     ->html(function () {
                        //         $imageUrl = $this->getState()['product_image_url'] ?? '';
                        //         return $imageUrl 
                        //             ? "<img src='{$imageUrl}' alt='产品预览图' class='max-w-xs rounded border p-2' />" 
                        //             : "<div class='bg-gray-100 p-4 rounded text-gray-500'>未获取到产品图片</div>";
                        //     }),
                    ]),
            ]);
    }
}

自定义Blade视图（方式1使用）

创建文件 resources/views/filament/components/product-preview-image.blade.php：

<div class="flex items-center justify-center p-4">
    @if($imageUrl)
        <img 
            src="{{ $imageUrl }}" 
            alt="产品预览图" 
            class="max-w-xs max-h-64 object-contain rounded border bg-white p-2 shadow-sm"
        >
    @else
        <div class="w-full max-w-xs bg-gray-100 p-6 rounded text-center text-gray-500">
            <svg class="w-16 h-16 mx-auto mb-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
            </svg>
            <p>未获取到产品图片</p>
        </div>
    @endif
</div>

关键注意点 #

• 临时状态管理：Filament向导会自动维护表单状态，通过$set()方法存入的product_image_url可以在后续步骤直接读取
• API异常处理：务必添加try/catch块处理请求超时、接口报错等情况，避免表单崩溃
• 图片样式控制：通过CSS类（如max-w-xs）限制图片尺寸，避免破坏页面布局

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