はじめに

現在rails api + typescript(react)でポートフォリオを製作中で、
userがログインしているときはヘッダーにプロフィール画像が表示される機能を実装しようと考えていました。

↓こんな感じに画像を表示させたいと考えていました。

ですが、railsをapiモードで"carrierwave"のgem使うのは初めてで少し身構えたのですが、
material-uiを使えば便利にデフォルト画像を設定して、レイアウトも整えてくれてとても便利でした。

学習のアウトプットとして備忘録として残します。
同じことをしたい人の助けになれば幸いです

環境

react 18.0.0
material-ui 4.12.4 (5系の場合は書き方が少し違うかもしれないので注意です)
rails 6.1.4
M1mac

material-uiが全てを解決してくれた

railsでviewを書いている時は、"carrierwave"の設定でデフォルト画像を設定していたのですが、reactだとどんな風に書けばいいんだろう？
railsにデフォルト画像を設置してaxiosでデータを持ってくる記述をすればいいのかな？等色々考えていたのですが、書くコードが多くなりそうでもっと簡単に実装する方法はないか考えていました。

そんな時に、material-uiにとても便利なというコンポーネントというものを見つけました！

Avatarの使い方

結論だけ書くと、下記のように書けば画像データがない場合にデフォルト画像を表示してくれます。
めちゃくちゃ簡単ですね。
しかも最初から画像を丸くしてくれているんです！！ありがたい。。（もちろん設定で四角にもできます）

<Avatar src={currentUser?.image.url} />
//=>srcには画像のurlを代入する(今回はログイン中アカウントの画像urlを代入しています)

※デフォルト画像

※画像をアップロードしている場合はその画像が表示される

一体何が起きているのか

Avaterはデータを読み込めない場合に備えてデフォルトで画像が用意されています。
そのため、今回はsrcが読み込めなかった場合（今回だとログイン中のアカウントがプロフィール画像を設定していない場合）はデフォルトの画像が表示されました。

ちなみに、Avaterにはsrcと一緒にaltを記述することができます。
srcが読み込めなかったときは、altに記述されている文字列の最初の一文字が表示されます。(imgタグと似ていますね。）

ちなみに下記の記述の場合は、Aが表示されます。

<Avatar alt="Allan Saint-Maximin" src="存在しない画像のurl" />

もっとAvaterは色々とカスタマイズできるので、ぜひ公式ドキュメントを覗いてみてください。