Laravel 8 Jetstream profile-photos not showing

Question

Regarding Laravel 8 and jetstream

I just tried installing and playing it in fortify but I can't really understand why my profile photo not showing a picture.

update-profile-information-form

<!-- Current Profile Photo -->
<div class="mt-2" x-show="! photoPreview">
<img src="{{ $this->user->profile_photo_url }}"
          alt="{{ $this->user->name }}"
          class="rounded-full h-20 w-20 object-cover">
</div>

.env

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:6IJbdi+QYczKeLT7yOw3OgPsHucXn1KxVUb27hTQKpU=
APP_DEBUG=true
APP_URL=http://127.0.0.1:8000

config / filesystems

'public' => [
            'driver' => 'local',
            'root' => storage_path('/public/storage'),
            'url' => env('APP_URL').'/public/storage/',
            'visibility' => 'public',
        ],

Evil Yoda · Answer 1 · 2020-11-07T22:38:07.690

Your problem was the default APP_URL setting in .env file:

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:6IJbdi+QYczKeLT7yOw3OgPsHucXn1KxVUb27hTQKpU=
APP_DEBUG=true
APP_URL=http://localhost

The artisan serve command launched the app on http://127.0.0.1:8000, so you changed the APP_URL correspondingly:

APP_URL=http://127.0.0.1:8000

I wouldn't recommend this. Sometimes, for various reasons, the command could change the port to 8001, 8002, etc.

$ php artisan serve
Starting Laravel development server: http://127.0.0.1:8000
Failed to listen on 127.0.0.1:8000 (reason: Address already in use)
Starting Laravel development server: http://127.0.0.1:8001
PHP 7.4.12 Development Server (http://127.0.0.1:8001) started

Simple solution

Just comment or leave the APP_URL in your .env file empty:

#APP_URL=http://localhost
APP_URL=

This will remove the http://localhost part from profile images and solve the problem:

<img src="/storage/profile-photos/photo.jpeg">

You will have different .env file in production environment anyway.

Additionally

You made a small change in your config/filesystems.php file:

'public' => [
    'driver' => 'local',
    'root' => storage_path('/public/storage'),
    'url' => env('APP_URL').'/public/storage/',
    'visibility' => 'public',
],

The original setting was:

'root' => storage_path('/app/public'),

It worked only after you have deleted and rebuilded the symlink.
But now, in your project directory, you probably have a situation like this:


    - public                           - storage
      + css                              - app
      + js                                 - public
      - storage                              - profile-photos
        - public                         - public
          - storage                        - storage
            - profile-photos                 - profile-photos
        .htaccess                        + framework
        favicon.ico                      + logs
        index.php
        mix-manifest.json
        robots.txt
        web.config

Basically, you made a new disk. I presume this wasn't intentional.
Also, your profile photos probably have a bit confusing part in their url:
.../storage/public/storage/profile-photos/....

You could revert to original setting, delete the additional folder, and rebuild the sysmlink.

config/filesystems.php

'disks' => [
    //...
    'public' => [
        'driver' => 'local',
        'root' => storage_path('app/public'),
        'url' => env('APP_URL').'/storage',
        'visibility' => 'public',
    ],
    //...
],

score 14 · Answer 2 · answered Sep 26 '20 at 10:03

14

You need to create storage under public first then link it. So first go to laravel project main folder and then public folder.If storage links doesnt exist create it. then back to project main folder and create the storage link

$  cd (laravel project folder)
$  cd public
$  rm -r storage
$  cd ..
$  php artisan storage:link

it should solve the issue..

answered Sep 26 '20 at 10:03

stoneshaq

316
3
18

2

Just a quick reminder that for those using Laravel Sail, you will need to `sail artisan storage:link` instead of php artisan. – Andre W. Dec 31 '20 at 13:17

score 8 · Answer 3 · answered Dec 25 '20 at 15:01

Set your APP_URL in .env , mine is APP_URL=http://localhost:8000 and run the command in CLI as

php artisan storage:link

to create the symbolic link for storage/app/public, if you haven't run the command you will not get the profile image in you dashboard.

score 7 · Answer 4 · answered Nov 18 '20 at 08:54

7

Locate the file in the config folder called jetstream.php and look for 'features' key in the returned array and uncomment the Features::profilePhotos() value.

Before:

'features' => [
    // Features::profilePhotos(),
    // Features::api(),
    // Features::teams(),
],

After:

'features' => [
     Features::profilePhotos(),
    // Features::api(),
    // Features::teams(),
],

answered Nov 18 '20 at 08:54

Anil Kumar R.V

71
1

You're welcome buddy. It's nice to know that it did resolve your issue. – Anil Kumar R.V Apr 04 '21 at 07:31

score 6 · Answer 5 · answered Sep 26 '20 at 08:34

6

Is the profile picture stored successfully?

(Window) If yes, these are the steps I fixed it:

Delete the shortcut folder storage created at /project/public/
Use the command php artisan storage:link again
Refresh the webpage and it solved.

answered Sep 26 '20 at 08:34

Khandoker Hirok

316
1
2
8

This should be the proper answer, works on the first try. Thank you – Lucas M. Oliveira Mar 19 '22 at 06:21

score 4 · Answer 6 · answered Oct 12 '20 at 21:15

4

i did this: delete (APP_URL) on filesystems.php and this solves my problem, the profile picture is not showing on jetstream

'public' => [
            'driver' => 'local',
            'root' => storage_path('app/public'),
            'url' => env('').'/storage',
            'visibility' => 'public',
        ],

answered Oct 12 '20 at 21:15

Mull Algibrhani

41
2

This ultimately got me to the problem, which was the my APP_URL was not properly set in the .env file. – Andrew Fox Aug 19 '21 at 18:59

score 4 · Answer 7 · answered Oct 22 '21 at 11:54

First of all, we assume you already enable in config/jetstream feature of profilePhoto

Change your.env file to artisan serve link already started. Like this

  APP_URL=http://127.0.0.1:8000

Them execute these commands

php artisan storage:link
php artisan optimize
php artisan config:clear

Reload or upload again your photo profile and done

Hizbullah Watandost · Answer 8 · 2021-01-18T20:21:02.263

I faced the same issue when working on my project using Laravel 8 (current latest release) Here are two approaches I got over the issue:

In the first approach you can easily change the application URL in the browser from 127.0.0.1:8000 to localhost:8000 and then link the public/storage with storage/app/public folder using the command php artisan storage:link
Or in the second approach, you can edit the environment file. Go to the environment configuration file (.env) and change the APP_URL from http://localhost to http://127.0.0.1:8000 and then link the public/storage with storage/app/public folder using the command php artisan storage:link

Finally, restart the application using the command php artisan serve, now it must work. I hope it could help anyone who is facing such an issue.

score 1 · Answer 9 · edited Dec 12 '20 at 15:21

1

sorry I had this problem an solved by this level

Locate the file in the config folder called jetstream.php and look for 'features' key in the returned array and uncomment the Features::profilePhotos()
go to .env and change app uri to this APP_URL=http://localhost:8000
in terminal enter:

php artisan serve

edited Dec 12 '20 at 15:21

ranka47

995
8
25

answered Dec 11 '20 at 20:50

Mostafa Alavi

119
1
2

score 1 · Answer 10 · answered Jan 13 '23 at 03:35

I know there's a lot of other answers here and this is a somewhat older question but since it's high on Google search I'm going to add what I found to be my problem in hopes that it can help someone facing a similar problem.

I was able to see that my profile photo was uploaded and all the settings and suggestions here seemed to be correct, but I still wasn't getting any output when trying to access user.profile_photo_url in my template. It turned out that in HandleInertiaRequests.php I was sharing the user object but only allowing it to show certain properties. I simply had to add "profile_photo_url" to the list of properties, so it looked like this:

public function share(Request $request)
{
    return array_merge(parent::share($request), [
        'ziggy' => function () use ($request) {
            return array_merge((new Ziggy)->toArray(), [
                'location' => $request->url(),
            ]);
        },
        'user' => fn () => $request->user()
            ? $request->user()->only('id', 'name', 'email', 'email_verified_at', 'current_team_id', 'account_id', 'profile_photo_url')
            : null,
    ]);
}

image of function where use is shared

score 0 · Answer 11 · answered Nov 01 '20 at 17:52

0

In config/app.php the APP_URL may need a port like:

'url' => env('APP_URL', 'http://localhost:8080'),

answered Nov 01 '20 at 17:52

user14559664

1

score 0 · Answer 12 · answered Dec 28 '20 at 22:31

0

Make your your .env APP_URL is correct and make sure to run php artisan storage:link. https://github.com/laravel/framework/issues/34319#issuecomment-691677346

answered Dec 28 '20 at 22:31

user2511140

1,658
3
26
32

score 0 · Answer 13 · answered Feb 09 '21 at 03:35

0

   'public' => [
        'driver' => 'local',
        'root' => storage_path('app/public'),
        'url' => '/storage',
        'visibility' => 'public',
    ],

Hik hik

answered Feb 09 '21 at 03:35

EM POV

17
2

score 0 · Answer 14 · answered Apr 15 '21 at 02:19

0

I faced the same issue and just run php artisan storage:link and it's work for me.

note : i run this command at fresh start of laravel and didn't change my setting of storage path (default)

answered Apr 15 '21 at 02:19

Kharisma Wahyudin

25
3

score 0 · Answer 15 · edited May 03 '21 at 11:33

0

go to the config folder and open the (jetstream.php) file.
go to the feature section and uncomment the profile photo feature

edited May 03 '21 at 11:33

Minal Chauhan

6,025
8
21
41

answered May 03 '21 at 07:13

Basir Ahmad Ahmadi

1

score 0 · Answer 16 · answered Jul 08 '21 at 12:24

If your Jetstream profile-photos not showing you have to do simple 3 main steps

First run this command php artisan storage:link
Features::profilePhotos(), enable this from config/jetstream.php
Lastly and mainly Change APP_URL from .env file (This is important) if your APP_URL=http://localhost this will not show you so change it to APP_URL= http://127.0.0.1:8000 or if your are using virtual host then APP_URL= http://livewire_app.dev see this is working fine for me

score 0 · Answer 17 · answered Jan 28 '23 at 20:02

In my case I had followed someone suggestions a few months ago to change the default ui-avatars to Gravatar and my user model was implementing the hasProfilePhoto trait's functions... now if this is not the case for you I recommend implementing the related functions into your User model, specially since JetStream is not meant to be an updateable vendor package but a bootstrap starting point for your application. The very least you can play with these functions outputs and figure out where the problem is. It seems that the main problem is that the photo is uploaded but not retrieved through the function below that you can implement into the User model and see what part of the output is incorrect:

 public function getProfilePhotoUrlAttribute()
    {
        return $this->profile_photo_path
                    ? Storage::disk($this->profilePhotoDisk())->url($this->profile_photo_path)
                    : $this->defaultProfilePhotoUrl();
    }

I hope this helps.

score -1 · Answer 18 · answered Oct 14 '20 at 08:42

I also did this: removed the (APP_URL) from config/filesystems.php

'public' => [
            'driver' => 'local',
            'root' => storage_path('app/public'),
            'url' => env('').'/storage',
            'visibility' => 'public',
        ],

But this only solved half the problem for me. The image now only showed in the navbar, but still not in the profile page. To accomplish that I did this: In the update-profile-information.blade.php file I changed the image source to

/storage/profile-photos/{{basename($this->user->profile_photo_path)}}

(probably not a proper solution, but it worked for me for now on my learning project)

You should rather edit your `.env` and set `APP_URL=http://localhost` for example (depends if you're using xampp or whatever). — AlexioVay, Jul 06 '21 at 12:29

score -1 · Answer 19 · edited Jun 20 '23 at 22:11

-1

Set APP_URL in .env file. MY problem is fixed.

APP_URL=http://localhost:8000

edited Jun 20 '23 at 22:11

Brian Tompsett - 汤莱恩

5,753
72
57
129

answered Jun 17 '23 at 08:13

Riyaj Hossen

1
1

Laravel 8 Jetstream profile-photos not showing

19 Answers19

Simple solution

Additionally

Linked