Avatar(@mui)のfallback処理を簡潔に書きたい

経緯

mui(旧Material UI)のAvatarコンポーネントにalt属性をつけておくと画像の読み込みに失敗した時に一文字目を表示してくれるらしいんですが、なんかアイコンが出てきて変だなぁってなったので簡単な書き方をここに記します。

検証環境

npmパッケージそれぞれのバージョンはこちら

react: 17.0.2
@material-ui/core: 4.12.1
@mui/material: latest

流し込むpropsはこちら

type User = {
  name: string
  thumbnail?: string // nullable
}

TL;DR

こう書くのが一番手っ取りばやかったです。
実際は１行で書いてます。

<Avatar
  src={user.thumbnail || 'http://'}
  alt={user.name}
/>

解説

詳細に話せる自信はないので、気になる方はソースコードをご確認ください。

Avatarのsrc属性に入れるのはURL形式じゃないとだめみたいで、上記のUser型みたいなデータをそのまま流そうとするとthumbnailがnullの場合にfallbackされず、User Iconが表示されてしまうみたいです。

そもそも公式的には以下のようにchildren propsに表示したい内容を記述するのを紹介されてますが、atom層のAvatar相手に閉じタグを使って長々と書きたくないのです。。

<Avatar src={user.thumbnail} alt={user.name}>{user.name[0]}</Avatar>

相対パスか絶対パスになってればいいので、example.comでも/でもいいのですが余計なリクエストを送ってしまうのは最悪どこかの迷惑になってしまうのでhttp://という形式にしました。

---

以上です！
ここ間違ってるよ〜とかもっといい書き方あるよって方がいらっしゃれば、ぜひコメントください！