如何在 this.$page.props.user 中使用惯性js设置上传的头像？

Question

In Laravel 8 app with inertiajs/inertia-vue 0.7/vuejs2 with fortify (but without jetstream)

I use "spatie/laravel-medialibrary": "^9.9" for avatar uploading like

$loggedUser = auth()->user();
$avatar_file_path = $avatarImageUploadedFile->getPathName();
$loggedUser->addMedia( $avatar_file_path )->toMediaCollection('avatar');

and it works, but in which way can I use avatar in on client part when I use

this.$page.props.user

in vue components properties to check which user is logged and show his info?

Thanks!

Answer 1

You can do this with the 'Shared data' feature via the HandleInertiaRequests middleware .

For example, to share user info you can do the following:

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Storage;

class HandleInertiaRequests extends Middleware
{
    public function share(Request $request)
    {
        return array_merge(parent::share($request), [
            'user' => function () {
                return Auth::user() ? [
                    'id' => Auth::user()->id,
                    'name' => Auth::user()->name,
                    'email' => Auth::user()->email,  
                    // get path to avatar
                    'avatar' => Storage::url('avatar-of-the-user.jpg'),
                ] : null;
            },
        ]);
    }
}

Client side you can then access the avatar's URL with this.$page.props.user.avatar .