CODEWITHSUNDEEP
phplaravellaravel-jetstream
Khandoker Hirok
Khandoker Hirok

Reputation: 336

Laravel 8 Jetstream profile-photos not showing

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

Upvotes: 13

Views: 28828

Answers (19)

Riyaj Hossen
Riyaj Hossen

Reputation: 1

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

APP_URL=http://localhost:8000

Upvotes: -1

Neo
Neo

Reputation: 11567

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.

Upvotes: 0

Darren
Darren

Reputation: 21

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

Upvotes: 1

Iosvany Alvarez
Iosvany Alvarez

Reputation: 101

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

Upvotes: 4

Ali Abbas
Ali Abbas

Reputation: 338

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 enter image description here

Upvotes: 2

Basir Ahmad Ahmadi
Basir Ahmad Ahmadi

Reputation: 1

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

Upvotes: 0

Kharisma Wahyudin
Kharisma Wahyudin

Reputation: 25

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)

Upvotes: 0

EM POV
EM POV

Reputation: 17

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

Hik hik

Upvotes: 0

Hizbullah Watandost
Hizbullah Watandost

Reputation: 247

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.

Upvotes: 3

user2511140
user2511140

Reputation: 1696

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

Upvotes: 0

Manu R S
Manu R S

Reputation: 970

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.

Upvotes: 8

Mostafa Alavi
Mostafa Alavi

Reputation: 139

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

Upvotes: 1

Anil Kumar R.V
Anil Kumar R.V

Reputation: 71

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

Upvotes: 7

Evil Yoda
Evil Yoda

Reputation: 371

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

Upvotes: 27

user14559664
user14559664

Reputation: 1

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

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

Upvotes: 0

Alwyn
Alwyn

Reputation: 9

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)

Upvotes: -1

Mull Algibrhani
Mull Algibrhani

Reputation: 41

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

Upvotes: 4

stoneshaq
stoneshaq

Reputation: 336

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

Upvotes: 15

Khandoker Hirok
Khandoker Hirok

Reputation: 336

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.

Upvotes: 6

Related Questions