Laravel 8 Jetstream 带有社交名流头像的个人资料照片

Question

我正在尝试 Laravel 8 Jetstream 和 Laravel Socialite。 问题是当我检索头像并将其 URL 用于 profile_photo_path 时。 Blade 文件附加了 http://localhost:8000/storage/，导致头像无法显示。

我已启用jetstream的个人资料照片 config/jetstream.php

'features' => [
    Features::profilePhotos(),
    Features::accountDeletion(),
],

这是我存储用户的方式app/Http/Controllers/LoginController.php

    protected function registerOrLoginUser($user, $driver=null)
    {
        if(!is_null($driver)){
            $whereColumn = null;
            if($driver == 'facebook'){
                $whereColumn = "facebook_id";
            }
            if($driver == 'google'){
                $whereColumn = "google_id";
            }

            try{
                $findUser = User::where($whereColumn, $user->id)->first();
                if($findUser){
                    Auth::login($findUser);
                } else{
                    $newUser = new User();
                    $newUser->name = $user->name;
                    $newUser->email = $user->email;
                    $newUser->password = encrypt('');
                    $newUser->$whereColumn = $user->id;
                    $newUser->profile_photo_path = $user->getAvatar();
                    $newUser->save();
                    Auth::login($newUser);
                }

我在这里看到了问题resources/views/navigation-menu.blade.php

<button class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-gray-300 transition duration-150 ease-in-out">
   <img class="h-8 w-8 rounded-full object-cover" src="{{ Auth::user()->profile_photo_url }}" alt="{{ Auth::user()->name }}" />
</button>

所以我尝试修复这个blade文件并在这里放置一个if语句：

<button class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-gray-300 transition duration-150 ease-in-out">
    <img class="h-8 w-8 rounded-full object-cover" src="{{ (Auth::user()->google_id !== null ||  Auth::user()->facebook_id !== null ) ? Auth::user()->profile_photo_path : Auth::user()->profile_photo_url }}" alt="{{ Auth::user()->name }}" />
</button>

“If 语句”存在缺陷，当社交名流登录用户决定更改其图片时，该语句就会中断。我尝试了这个解决方案，但它只将数值存储到我的 profile_photo_path 中。知道如何让社交名流和 Jetstream 的内置个人资料照片发挥作用吗？

Answer 1

我从

getProfilePhotoUrlAtrribute

复制了

vendor/laravel/jetstream/src/HasProfilePhoto.php

方法 到

App\Models\User

并修改它以接受来自社交网站的头像网址或检索上传的照片。

<?php
    public function getProfilePhotoUrlAttribute()
    {

        $path = $this->profile_photo_path;

        if (Storage::disk($this->profilePhotoDisk())->exists($path)){
            return Storage::disk($this->profilePhotoDisk())->url($this->profile_photo_path);
        } 
        elseif (!empty($path)){
            // Use Photo URL from Social sites link... 
            return $path;
        }
        else {
            //empty path. Use defaultProfilePhotoUrl
            return $this->defaultProfilePhotoUrl();
        }
    }
?>

Jetsream 文档参考

Answer 2

@user2645113 的答案适用于 2023 年，laravel 10。源文件和目标文件相同，但现在函数名称是

profilePhotoUrl

。

我确信这段代码可以重构得更好，但这是一个工作版本：

/**
     * Get the URL to the user's profile photo.
     *
     * @return \Illuminate\Database\Eloquent\Casts\Attribute
     */
    public function profilePhotoUrl(): Attribute
    {
        return Attribute::get(function () {

            $path = $this->profile_photo_path;

            if ($path != null && Storage::disk($this->profilePhotoDisk())->exists($path)) {
                return Storage::disk($this->profilePhotoDisk())->url($this->profile_photo_path);
            } elseif ($path != null && !empty($path)) {
                // Use Photo URL from Social sites link... 
                return $path;
            } else {
                //empty path. Use defaultProfilePhotoUrl
                return $this->defaultProfilePhotoUrl();
            }
        });
    }

显然，请务必包括：

use Illuminate\Database\Eloquent\Casts\Attribute;
use Illuminate\Support\Facades\Storage;