Level 10
run
php artisan storage:link
Jan 12, 2021
9
Level 1
JetStream profile-photos not showing
I know this topic was discussed many times and I've tried to solve it with all proposed methods but in vain(( I really need help! That is what I have:
APP_URL=http://ordimedia.test
filesystems.php
'public' => [
'driver' => 'local',
'root' => storage_path('app/public'),
'url' => env('APP_URL').'/storage',
'visibility' => 'public',
],
in database:
profile_photo_path: "profile-photos/h8rBIhx6bVHqUDqVqOSoc7NIgfYhW67hHN2sldLK.jpeg"
getProfilePhotoUrlAttribute() returns
profile_photo_url
=> "http://ordimedia.test/storage/profile-photos/h8rBIhx6bVHqUDqVqOSoc7NIgfYhW67hHN2sldLK.jpeg"
files are stored at
\storage\app\public\profile-photos
in view:
<img src="http://ordimedia.test/storage/profile-photos/h8rBIhx6bVHqUDqVqOSoc7NIgfYhW67hHN2sldLK.jpeg" >
And yes, I've done "php artisan storage:link" hundreds times, but the photo still not found
Level 1
the hundred and first time? do you think it will help?)
Level 25
Hi @fanisa
Do you have a standard folders structure?
If you list the files in \public\storage\profile-photos at console, the image is there?
Level 1
I haven't changed the standard folders structure. And there are no files at \public\storage\profile-photos, there's not even a folder 'profile-photos' there (even if I create it manually, the files are not stored in it). The photos are stored only at project\storage\app\public\profile-photos
Level 25
@fanisa well that seems to be the problem then...as the php artisan storage:link command should create the link to \storage\app\public inside public.
That should allow access to the profile-photos making them public...
Try creating the link manually and see if it works
1 like
Level 25
@fanisa if by any chance you are using homestead for development, have into consideration that the storage:link command must be run inside homestead console and not at your local console.
Remember to delete the storage folder that you've manually created under public before running storage:link again is this seems to be the problem
1 like
Level 1
Oh, yes! Thank you! You're a genius) I haven't even written that I'd created the storage folder manually) That was the problem... I deleted it, and it works. But there is a little problem... The preview is not shown. Can you tell me please, what is the reason for this?
<div class="mt-2" x-show="photoPreview">
<span class="block rounded-full w-20 h-20" x-bind:style="'background-size: cover; background-repeat: no-repeat; background-position: center center; background-image: url(\'' + photoPreview + '\');'" style="background-size: cover; background-repeat: no-repeat; background-position: center center; background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT...');">
</span>
</div>
Level 25
@fanisa I'm glad it worked!!
Regarding the preview, you have the URL as mentioned into the photoPreview variable?
Also, you have the background-image attribute set twice, one within x-bind:style and again at plain style attribute.
What is it showing instead of the preview? A broken image icon or anything else?
1 like
Level 1
Ok, the url is correct and the image is shown at the console debugger properly... The problem was with Tailwind styles (I think) as I don't use this stylesheet. And the image was minuscule (because of font-size 13px of span) and it was out of visible area. I'll fix that without a problem. Thank you for help!
Please or to participate in this conversation.