Zenn
😎

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

2021/10/12に公開
JavaScript
React
TypeScript
Material-UI
mui
tech

こんにちは、nullです！
株式会社オーリスという創業4年目のベンチャー企業でフロントエンドエンジニアをしています。
オーリスHP

経緯

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://という形式にしました。

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

私はオーリスで技術委員会に参加しててたまにこういった記事を書いたり、twitterアカウントで気になった記事をツイートしたりしてるのでよろしければフォローお願いします！

Discussion