Zenn
🦔

laravel12 starter kit(react)のavatar画像の扱い

に公開
Laravel
shadcn/ui
laravel12
tech


要するにこのTU

これはどうなっているのかってことで。

当該

resources/js/components/user-menu-content.tsxとかの中の

<UserInfo user={user} showEmail={true} />

この部分に仕掛けがある。つまり resources/js/components/user-info.tsx を見る

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'

ここから理解可能できるのはまたしてもshadcn/uiであるということである。

https://ui.shadcn.com/docs/components/avatar

で

      <Avatar className="h-8 w-8 overflow-hidden rounded-full">
        <AvatarImage src={user.avatar} alt={user.name} />
        <AvatarFallback className="rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white">{getInitials(user.name)}</AvatarFallback>
      </Avatar>

このように仕掛けられている

つまり、user.avatarが無いと基本的にAvatarFallbackに落下すると思えばよい。

ではavatarをlaravel12で管理するにはどうすればよいだろうか

一番ベタなのはavatarカラムを作り挿入することだ

database/migrations/0001_01_01_000000_create_users_table.php
@@ -17,6 +17,7 @@ public function up(): void
             $table->string('email')->unique();
             $table->timestamp('email_verified_at')->nullable();
             $table->string('password');
+            $table->string('avatar')->nullable();
             $table->rememberToken();
             $table->timestamps();
         });

たとえば外部サービスを使うとして

https://i.pravatar.cc/300?u=test@example.com

的なのをseedしてみよう

database/seeders/DatabaseSeeder.php
@@ -18,6 +18,7 @@ public function run(): void
         User::factory()->create([
             'name' => 'Test User',
             'email' => 'test@example.com',
+            'avatar' => 'https://i.pravatar.cc/300?u=test@example.com',
         ]);
     }
 }

これでseedするとavatarに適当な画像のurlが入る

= App\Models\User {#6228
    id: 1,
    name: "Test User",
    email: "test@example.com",
    email_verified_at: "2025-05-08 04:45:47",
    #password: "$2y$12$hwDVE4Xg/6CNJ5B98wOzT.tUnQ9RAulXLfnYQY6MeBO4laLvrwnnC",
    avatar: "https://i.pravatar.cc/300?u=test@example.com",
    #remember_token: "vQcba4ROwn",
    created_at: "2025-05-08 04:45:48",
    updated_at: "2025-05-08 04:45:48",
  }

アクセスすると

shadcn/uiがそれっぽくモダンな表示にしてくれるってわけ

これは非常に便利なのだが

avatarのuploadをしようと思うといきなりurlをつっこむという構造は地味に厄介かも。routeが変わったりするとurlあるいはpathを再生成しないといけないしメンテナンス性が非常に微妙だ。従って基本的にはユーザー情報を組み立て直してavatarにurlを生成してつっこんで上げるという手法になるのではなかろうか。

このあたりのavatar生成の組み立てに関して次回からシリーズでちょっと書いていく、つもり、多分。

avatar構造の話は長くなると読み辛いからここまで。ではまた。

Discussion