Vue.제이스에 Gravatar를 넣었어요.

Vue.js가 만든 프로젝트에 Gravatar를 넣었기 때문에 가져오는 방법을 적어 두었습니다

이른바 Gravatar

Gravatar는 Qiita의 오른쪽 위에 위치한 것을 말합니다.

그래바타에 계정을 만들고 아이콘을 등록함으로써 Qita를 비롯한 다양한 웹 서비스에서 공통 아이콘을 사용할 수 있으므로 그래바타와 대응하는 서비스에 새 로그인 계정을 만들더라도 아이콘 등록을 하지 않아도 된다.
베입니다.js로 만든 프로젝트에 묻고 싶어서 가져왔습니다.
다음은 참고할 공식 홈페이지입니다.
https://ja.gravatar.com/site/implement/

npm로 설치

공식 홈페이지를 보면 HTML에 직접 작성해 가져올 수 있지만, 그래바타에서 이미지의 URL을 내보내기 위해서는 MD5로 암호화해 활용한 메일 주소 등으로 다소 시간이 소요된다.
찾아보니 노드가 발견됐어요.js 라이브러리를 제공한 것을 알고 있기 때문에 이쪽 방법으로 가져오십시오.
https://www.npmjs.com/package/gravatar
따라서 가져올 항목의 루트에서 다음 명령을 실행합니다.

$ npm install gravatar

명령을 실행할 때 node-modules 아래gravatar 디렉터리, 설정 라이브러리를 만듭니다.
그리고 패키지.json에 다음과 같은 내용을 추가합니다.
package.json

 "dependencies": {
    "gravatar": "^1.8.0",
  },

이렇게 되면 이용할 준비가 완성된다.

vu 파일에 import 정의 추가하기

vue 파일의 Script 시작 부분에 import 정의를 추가합니다.

<script lang="ts">
import gravatar from '@/node_modules/gravatar';

이미지 URL 가져오기

template에서 Gravatar가 호출한 이미지의 URL을 src에 설정합니다.

<div class="user-icon"><img :src="gravatarUrl" ></div>

Script부는 import의 라이브러리에서 URL 방법을 이용하여Gravatar의 이미지의 URL을 가져옵니다.

  private beforeMount(): void {
    // gravatarからユーザーアイコンを取得
    this.gravatarUrl = gravatar.url(this.loginUser.mail);
  }

완성

이미지 URL을 성공적으로 가져오면 gravatar에 등록된 아이콘이 표시됩니다.

또한 기본적으로 사각형의 이미지를 표시하기 때문에 아이콘의 모양을 표시합니다

.user-icon {
    border-radius: 50%;
}

주변을 둘러봐도 돼요.

총결산

절차에 따라 기재한 대로 아주 간단하게 가져왔습니다!
1부터 모든 사용자 계정의 아이콘 관리 메커니즘을 실시하는 것은 상당히 번거롭다. 아이콘을 이렇게 보이게 하려면Gravatar를 가져오는 것도 좋다.