以 Laravel/Filament 形式添加图像

Question

我正在尝试在 Filament 中构建一个向导表单。它有 2 个步骤：

1. 首先，用户需要指定一些产品编号。
2. 之后脚本通过 api 从其他站点获取一些信息，包括图像 url。我希望在此步骤中显示相应的图像。因此，用户应该确认这是他需要的产品。

现在我不明白如何以这种形式显示图像。它不是文件上传器。这只是一个图像。

据我了解，可以通过ViewField来完成。但不明白如何指定它应该是某个 Image 组件以及如何在第一步的 afterValidation 中传递 url。请帮忙。

    public function getSteps(): array
    {
        return [
            Step::make('Product ID')
                ->description('Write a product id you want')
                ->schema([
                    TextInput::make('product_id')
                        ->required()
                        ->reactive()
                ])
                ->afterValidation(function(Get $get, Set $set){
                    $id = $get('product_id');
                    $product_image_url = Product::get_image_url($id);
                    $set('product_image', $product_image_url);
                }),
            Step::make('Confirmation')
                ->description('Check a product one more time and confirm you want it')
                ->schema([
                    ViewField::make('product_image')
                       ...............
                       ...............
                ]),

Answer 1

我的第一次尝试如下：

• 将

  live()

  指令（可能带有 debounce）添加到

  product_id

  字段。这将在更改该字段的值时再次呈现整个表单。因此，当选择产品时，所有字段都会再次呈现。
• 在您看来，请确保您能够以任何方式访问

  Get

  类或当前表单状态，以便您可以检索选定的产品 ID。在视图中使用 PHP 来检索图像并将其用作 HTML 图像元素的源。

如果这不能解决问题，这里有一个替代方法：

• 为产品图片 URL 添加隐藏字段
• 在 ViewField 的视图中，添加带有占位符源的图像元素
• 每当隐藏字段值发生变化时，使用 JS 更新图像元素的

  src

  属性。