Laravel 8 Jetstream profile-photos not showing

Viewed 20591

Laravel 8 and jetstream, is it really new?

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

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

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

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.

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.

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

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

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.

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

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

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

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

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

Hik hik

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)

  • 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

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

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)

Related