DEV Community 👩‍💻👨‍💻

kimihito
kimihito

Posted on • Originally published at kimihito.hatenablog.com on

アバター画像のプレースホルダに avatars.dicebear.com を利用する

TL;DR

https://avatars.dicebear.com/v2/種類/値.svg みたいな感じで入力すればアバター画像のプレースホルダが手に入る。 他にもいろいろオプションがあるので便利かも。

やりたいこと

Webサービスでよくある、ログインユーザのアイコン画像を表示するときデフォルトをどうしようと思っていた。

GitHubのようなアイコン生成は identicons というらしく、似たような形で表現したいなーと思っていた。

やったこと

npmパッケージなどないか調べていたら、上掲の DiceBear/avatars を見つけたので導入した。 上掲のURLで利用することを推奨していたけど、npmパッケージで導入。

「Sprite Collections」を見ると identicons だけじゃなくていろんな種類がある。

READMEの通りに導入した。

Stimulus: A modest JavaScript framework for the HTML you already have.で使うときはこんな感じでconnect で呼び出す。

gist5e003daad409e4688ab04798acd94373

Top comments (0)

You’ve already scrolled down this far, why not join our community of 900k+ developers all learning together?