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',
        ],

Answer 1

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.

Answer 2

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',
        ],

Answer 3

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)

Answer 4

sorry I had this problem an solved by this level

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

2. go to .env and change app uri to this APP_URL=http://localhost:8000

3. in terminal enter:

php artisan serve

Answer 5

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)

Answer 6

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

Answer 7

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..

Answer 8

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

Answer 9

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

Hik hik

Answer 10

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

1. First run this command php artisan storage:link
2. Features::profilePhotos(), enable this from config/jetstream.php
3. 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

Answer 11

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.

Answer 12

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

APP_URL=http://localhost:8000

Answer 13

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.

Answer 14

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

Answer 15

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:

1. 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

2. 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.

Answer 16

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

1. php artisan storage:link
2. php artisan optimize
3. php artisan config:clear

Reload or upload again your photo profile and done

Answer 17

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

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

Answer 18

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',
    ],
    //...
],

Answer 19

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(),
],