DEV Community

kimihito
kimihito

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

2

アバター画像のプレースホルダに 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

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)