Search code examples
laravelfilamentphp

Add image in Laravel/Filament form


I'm trying to build a wizard form in Filament. It has 2 steps:

  1. First, an user need to specify some product number.
  2. After that script gets some info including image url from other site by api. I want a respective image to be displayed on this step. As a result the user should confirm that it's a product he needs.

And now I don't understand how to display the image in this form. It's not a file uploader. It's just an image.

As I understand, it can be done via ViewField. But don't understand how to specify that it should be some Image component and how to pass an url there in afterValidation on the first step. Please, help.

    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')
                       ...............
                       ...............
                ]),

Solution

  • After messing about for a while, I needed a similar functionality. You can simply display the image in a Placeholder:

    Placeholder::make('Image')
       ->content(function ($record): HtmlString {
          return new HtmlString("<img src= '" . $record->URL . "')>");
    })