[Laravel:Jetstream]プロフィール画像を設定する機能を追加したい

未分類

LaravelのJetstreamで、プロフィール画像を設定する機能を追加したい。

最初はプロフィール画像を設定する機能は表示されてない

LaravelのJetstreamでは、デフォルトでプロフィール画像を設定・変更する機能があります。

しかし、その機能を表示させるにはいくつか手順を踏む必要があります。

ただJetstreamをインストールしただけでは、プロフィール画像を設定・変更する蘭はありません。

プロフィール画像を設定する機能を表示させる方法

まず、config/jetstream.phpの最後らへんの以下の部分のコメントアウトを外します。

'features' => [
    // Features::termsAndPrivacyPolicy(),
    Features::profilePhotos(), ←ここのコメントアウトを外す
    // Features::api(),
    // Features::teams(['invitations' => true]),
    Features::accountDeletion(),
],

そしてプロフィール変更画面を開いてみると、画像を変更する蘭が出現しました。

さっそく、プロフィール画像を変更してみると、どうやらphpエラーが起きてしまいます。。
(すいません、エラーのスクショを撮るの忘れました)

どうやら、usersテーブルに「profile_photo_path」カラムが追加されてなかったみたい。

なので、以下のコマンドで、DBのカラムを更新します。

$ php artisan migrate:fresh

これで、問題なく画像を変更することができました。

しかし、画像はこのようになっています。

画像がうまく読み取れてないみたい。。

なので、次は「config/filesystems.php」の41行目らへんを以下のように修正します。

'public' => [
    'driver' => 'local',
    'root' => storage_path('app/public'),
    // 'url' => env('APP_URL').'/storage', ←コメントアウト
    'url' => env('').'/storage', ←追加
    'visibility' => 'public',
],

これでうまく画像が表示されます。

自分のアイコンをhtmlの好きな場所に表示させたい時は、
以下のコードを書けばOK

<img class="h-8 w-8 rounded-full object-cover" src="{{ Auth::user()->profile_photo_url }}" alt="{{ Auth::user()->name }}" />

参考

コメント

タイトルとURLをコピーしました