Laravel Livewire: Temporary Preview Urls Not Working on Local Machine

Question

I tried uploading the file via Laravel Livewire using Livewire\WithFileUploads and I tried to get the preview of the image selected, to be uploaded, by implementing the method shown in the official documentation of livewire, but inspite of doing exactly the same I don't get to see the preview.

What I get to see is Broken Image as preview

I also tried to inspect the element and get the url and the URL I got was

http://192.168.1.33:8000/livewire/preview-file/tmRlboRMpPEv3MMOiX5iu6vPph0PLC-metacHJvZmlsZXBpYy5qcGc=-.jpg?expires=1654720661&signature=e0d825c78ae9bcbc8123b72a542ba827d984810aa32dee8527e63e0c9babf27a

I tried opening this URL and got to see A big black screen with a grey square in center

I am not sure where am I going wrong here. I am quickly adding up controller, blade and config, hoping that I get some solution for it, as I also referred to this solution but it didn't help

Livewire Controller

use Livewire\Component;
use Livewire\WithFileUploads;

class CenterRegistration extends Component
{
    use WithFileUploads;

    public $logo;

    public function updated($propertyName)
    {
        $this->validateOnly($propertyName);
    }

    public function render()
    {
        return view('livewire.logo-uploader');
    }

    public function submit()
    {
        $this->validate();
    }

    protected function rules()
    {
        return [
            'logo' => [
                'required',
                'mimes:png,jpg',
                'max:2048',
            ],
        ];
    }
}

Livewire Blade

<form wire:submit.prevent="submit">
<div class="input-group shadow-sm">
    <div class="input-group-prepend input-group-text bg-light rounded-5">
        {{ Form::label('logo','Logo',[
            'for' => 'logo',
            'class' => 'rounded-0 required',
        ]) }}
    </div>
    {{ Form::file('logo',[
        'id' => 'logo',
        'class' => "form-control rounded-5",
        'accept' => 'image/*',
        'required',
        'wire:model' => "logo"
    ]) }}
</div>
@if ($logo)
    <div>
        <img src="{{ $logo->temporaryUrl() }}"/>
    </div>
@endif
@error('logo') <span class="error text-danger">{{ $message }}</span> @enderror
<button class="btn btn-primary rounded-pill text-center mt-3" style="width: 20%;" type="submit">submit</button>
</form>

Basic Info

Laravel : 9.17.0 | Xampp

Answer 1

Check your storage folder permission

composer update
chmod -R 777 storage
chmod -R 777 public/storage
chmod -R 777 bootstrap/cache
php artisan optimize:clear
php artisan optimize