Image Not Displaying in Edit Form
Hi Filament colleagues,
When I upload an image in a form, the preview shows up correctly and everything is saved properly. In the table view (thumbnail), everything also looks fine.
However, when I go to edit the record, the image does not display properly—it just shows a loading spinner (it says "loading...").
I have checked the .env file and config/filesystems.php—everything is set correctly, including the APP_URL and storage path. I also ran php artisan config:cache and php artisan config:clear, but the issue is still there.
In summary:
✅ The image shows correctly in the table view (thumbnail)
❌ The image does not display in the edit form; it just shows the loading spinner.
Has anyone encountered this issue or know how to solve it?
22 Replies
Are you using the public file system? If you are did you run
Yes, I did. Everything is fine, and the image shows correctly in the front and back (table view), but in the edit form it still shows as loading.
It works fine locally, and also in the Hostinger test environment, but in the Hostinger production environment it just shows loading..
do you have any js errors in the browser dev tools?
Definitely check your browser. I suspect your edit page isn't loading it... Likely due to CORS.
check your .env file and change APP_URL the same URL in
php artisan serve
same problem, and I will show a video and a screenshot of my .env file.
Look at your browser, no lock. Looks like you accessed it under:
http://
not
https://
But you set it as https in your .env
Look in the network log not the console for the failure to fetch and see what the request really said
What storage engine are you using?
We’re using the default engine configured in MySQL, which is InnoDB
I think he meant if is the public, s3.
Storage Engine as in File Disk yeah
confg/filesystems
Looks good. I assume public in that case.
The network logs please..
the must important question is... you did run in your pc, but did you run in the server running the app?
He said he did?
Yes, I did. I ran php artisan storage:link both on my local machine (where I’m using Herd)
just covering every steps
I also need to run php artisan storage:link on the server where the app is deployed to create the symbolic link.
can you show us like @toeknee said the network tab to see if the fileupload is using http or https?
is that a question or an affirmation? if its a question, the answer is yes.
yes
you must run the command in every environment you have your app
I will try it
Hello again
I have resolved the issue with the cfls.be website, where there were problems when accessing via https://cfls.be and https://www.cfls.be. Specifically, some images were not loading correctly when using the www version.
To address this, I implemented the following changes in the .htaccess file:
Redirection from www to non-www with HTTPS:
I added a rewrite rule in the .htaccess file to permanently redirect all traffic from https://www.cfls.be to https://cfls.be. This ensures the site uses only the non-www version, preventing issues with resource loading, such as images.
Implemented code:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.cfls\.be$ [NC]
RewriteRule ^(.*)$ https://cfls.be/$1 [L,R=301]
</IfModule>
Preservation of the rewrite to the public/ directory:
I retained the existing rule that rewrites all requests to the public/ directory, as it is necessary for Laravel's proper functioning.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^(.*)$ public/$1 [L]
</IfModule>
Result:
All requests to https://www.cfls.be are now correctly redirected to https://cfls.be with a 301 (permanent redirect) status code.
Images and other resources load correctly when using the canonical URL https://cfls.be.
The site continues to function properly with Laravel's structure, and no additional issues have been detected.
The issue is now resolved, and I appreciate your support in addressing it.
Thank you,