Image not showing in filament php

I created a storage link and am able to view the image using localhost:8000/storage/children/image_name

17 Replies

I think I've told you this multiple times already: You need to provide some information, otherwise nobody can help. We can look into your computer 🤷

codeartisan•5mo ago

okay then let me provide as much information as needed First I upload the images using the code below

public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\Section::make('Create a new child')
                    ->description('Add a new child to the system.')
                    ->schema([
                        Forms\Components\TextInput::make('name')
                            ->required()
                            ->label("Full Name")
                            ->maxLength(255),
                        Select::make('gender')
                            ->options([
                                'Male' => 'Male',
                                'Female' => 'Female',
                            ])
                            ->required()
                            ->label("Gender"),
                        // Forms\Components\TextInput::make('story'),
                        MarkdownEditor::make('story')
                            ->required()
                            ->label("Child Story"),
                        // Forms\Components\TextInput::make('hobby'),
                        Repeater::make('hobby')
                            ->schema([
                                Forms\Components\TextInput::make('hobby')
                                    ->required()
                            ])
                            ->addActionLabel('Add Hobby')
                            ->collapsible()
                            ->label("Hobby"),
                        Forms\Components\FileUpload::make('profile_picture')
                            ->directory('children')
                            ->image()
                            ->label('Child Image')
                            ->required(),

                    ])

            ]);
    }

public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\Section::make('Create a new child')
                    ->description('Add a new child to the system.')
                    ->schema([
                        Forms\Components\TextInput::make('name')
                            ->required()
                            ->label("Full Name")
                            ->maxLength(255),
                        Select::make('gender')
                            ->options([
                                'Male' => 'Male',
                                'Female' => 'Female',
                            ])
                            ->required()
                            ->label("Gender"),
                        // Forms\Components\TextInput::make('story'),
                        MarkdownEditor::make('story')
                            ->required()
                            ->label("Child Story"),
                        // Forms\Components\TextInput::make('hobby'),
                        Repeater::make('hobby')
                            ->schema([
                                Forms\Components\TextInput::make('hobby')
                                    ->required()
                            ])
                            ->addActionLabel('Add Hobby')
                            ->collapsible()
                            ->label("Hobby"),
                        Forms\Components\FileUpload::make('profile_picture')
                            ->directory('children')
                            ->image()
                            ->label('Child Image')
                            ->required(),

                    ])

            ]);
    }

in the above code I store the child image in the directory called children and the image is stored perfectly fine The challenge is at the point of retrieving the image and during the editting

->columns([
                Tables\Columns\ImageColumn::make('profile_picture')
                    ->label("Cover Image")
                    ->disk("children")
                    ->circular(),
                Tables\Columns\TextColumn::make('name')
                    ->searchable()
                    ->sortable()
                    ->toggleable()
                    ->copyable()
                    ->label('Full Name'),
                Tables\Columns\TextColumn::make('gender')
                    ->searchable()
                    ->sortable()
                    ->toggleable()
                    ->copyable()
                    ->label('Gender'),
                Tables\Columns\IconColumn::make('is_sponsored')
                    ->boolean(),
                Tables\Columns\TextColumn::make('deleted_at')
                    ->dateTime()
                    ->sortable()
                    ->toggleable(isToggledHiddenByDefault: true),
                Tables\Columns\TextColumn::make('created_at')
                    ->dateTime()
                    ->sortable()
                    ->toggleable(isToggledHiddenByDefault: true),
                Tables\Columns\TextColumn::make('updated_at')
                    ->dateTime()
                    ->sortable()
                    ->toggleable(isToggledHiddenByDefault: true),
            ])

->columns([
                Tables\Columns\ImageColumn::make('profile_picture')
                    ->label("Cover Image")
                    ->disk("children")
                    ->circular(),
                Tables\Columns\TextColumn::make('name')
                    ->searchable()
                    ->sortable()
                    ->toggleable()
                    ->copyable()
                    ->label('Full Name'),
                Tables\Columns\TextColumn::make('gender')
                    ->searchable()
                    ->sortable()
                    ->toggleable()
                    ->copyable()
                    ->label('Gender'),
                Tables\Columns\IconColumn::make('is_sponsored')
                    ->boolean(),
                Tables\Columns\TextColumn::make('deleted_at')
                    ->dateTime()
                    ->sortable()
                    ->toggleable(isToggledHiddenByDefault: true),
                Tables\Columns\TextColumn::make('created_at')
                    ->dateTime()
                    ->sortable()
                    ->toggleable(isToggledHiddenByDefault: true),
                Tables\Columns\TextColumn::make('updated_at')
                    ->dateTime()
                    ->sortable()
                    ->toggleable(isToggledHiddenByDefault: true),
            ])

These are the columns where the image should be displayed but nothing is displayed

codeartisan•5mo ago

On the dashboard this is what I have

Dennis Koch•5mo ago

Do you have a disk "children"? Why are you using it for the table, but not for the form? Can you check the network tab and console of DevTools?

codeartisan•5mo ago

I added that disk called children

codeartisan•5mo ago

checking the network tab it seems it only tries to load the actually image name only without considering children directory

codeartisan•5mo ago

I have realized there is also a cors error it considers localhost/storage yet it should be localhost:8000/storage

Dennis Koch•5mo ago

Check your APP_URL. It doesn't match the domain you are using

codeartisan•5mo ago

I have updated it now

codeartisan•5mo ago

same cors error though thats a right path now do you think they are permissions

Patrick1989•5mo ago

localhost:8000 is trying to fetch from 127.0.0.1 why is that? what do you have in your .env file ? app_url If i want images to be displayed, i have to setup a VHOST so i can do something as domain.local , filament doesnt add the port number when i run php artisan serve

toeknee•5mo ago

You should be accessing it over 127.0.0.1 not localhost since how you are loading laravel in your dev enviroment It's nothing to do with filament, but how Laravel is serving itself. really you should use herd, valet, laragon etc not ports of :8000

codeartisan•5mo ago

okay thank you well noted

Dennis Koch•5mo ago

So, that's fixed?

codeartisan•5mo ago

am going to try on a live domain

Gaming

Programming

Image not showing in filament php