F
Filament•11mo ago
codeartisan

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
No description
17 Replies
Dennis Koch
Dennis Koch•11mo ago
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
codeartisanOP•11mo 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
codeartisanOP•11mo ago
On the dashboard this is what I have
No description
Dennis Koch
Dennis Koch•11mo 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
codeartisanOP•11mo ago
I added that disk called children
No description
codeartisan
codeartisanOP•11mo ago
checking the network tab it seems it only tries to load the actually image name only without considering children directory
codeartisan
codeartisanOP•11mo ago
No description
codeartisan
codeartisanOP•11mo ago
No description
codeartisan
codeartisanOP•11mo ago
I have realized there is also a cors error it considers localhost/storage yet it should be localhost:8000/storage
Dennis Koch
Dennis Koch•11mo ago
Check your APP_URL. It doesn't match the domain you are using
codeartisan
codeartisanOP•11mo ago
I have updated it now
No description
codeartisan
codeartisanOP•11mo ago
same cors error though thats a right path now do you think they are permissions
Patrick
Patrick•11mo 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
toeknee•11mo 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
codeartisanOP•11mo ago
okay thank you well noted
Dennis Koch
Dennis Koch•11mo ago
So, that's fixed?
codeartisan
codeartisanOP•11mo ago
am going to try on a live domain
Want results from more Discord servers?
Add your server