I am experiencing an issue where PNG images, specifically screenshots taken on my Mac, do not display correctly in the image preview after being uploaded via Livewire. The temporary URL is generated successfully, but the image itself doesn’t show up. Interestingly, if I manually copy the URL and paste it into the browser, the image loads just fine.
PNG files downloaded from Google or other sources load and display without issues. The problem only seems to occur with PNG screenshots taken on macOS.
This issue occurs both in my local development environment and on the server. I’ve already checked my Livewire configuration and confirmed that the PNG format is included in the preview_mimes array.
'temporary_file_upload' => [
'disk' => 's3', // Example: 'local', 's3' | Default: 'default'
'rules' => ['required', 'file', 'mimes:png,jpg,jpeg', 'max:12288'],
// Example: ['file', 'mimes:png,jpg'] | Default: ['required', 'file', 'max:12288'] (12MB)
'directory' => 'tmp', // Example: 'tmp' | Default: 'livewire-tmp'
'middleware' => null, // Example: 'throttle:5,1' | Default: 'throttle:60,1'
'preview_mimes' => [ // Supported file types for temporary pre-signed file URLs...
'png', 'gif', 'bmp', 'svg', 'wav', 'mp4',
'mov', 'avi', 'wmv', 'mp3', 'm4a',
'jpg', 'jpeg', 'mpga', 'webp', 'wma', 'avif',
],
'max_upload_time' => 5, // Max duration (in minutes) before an upload is invalidated...
],
I use:
“laravel/framework”: “^11”,
“livewire/livewire”: “^3.4”,
“php”: “^8.2”,
can somebody help me?
Thanks
enter image description here
enter image description here
Tried to describe what problem I am facing when i upload screenshots on my web, and I expect to get help to solve it.