How to add a Gravatar in Vue.js
Tags: gravatar, vue
Published: 2020-05-27 11:06:09

Adding a [Gravatar](http://en.gravatar.com/) (Globally Recognised Avatar) is a nice way to personalise the users experience.

It adds a familiar image, which the user uploads, to each site they visit which has it enabled:

![gravatar example image](https://dev-to-uploads.s3.amazonaws.com/i/g99hs1q4om11vwh3xt1o.png)

First of all, if you want to upload your own Gravatar image, head over to <http://en.gravatar.com/>, sign in and upload from here.

We are going to be focusing on the developer side, and how to enable it on your Vue.js website or app.

The process is pretty simple, not authentication is needed, and there is only a few steps to take:

1. Get the users email (we will already assume you have this)
2. Trim all of the email's leading and trailing whitespace
3. Set email to lower case
4. md5 hash the string

Since we are using Vue.js, we will assume you have the user stored as a data property called user:

```javascript
  data() {
    return {
      user: {
        email: "awesome@coolcompany.com"
      }
    };
  },
```

To hash, I am going to use the md5 NPM package, and install in our Vue project:

```javascript
// npm
npm i md5

// yarn
yarn add md5
```

Then import into our component's script section:

```javascript
<script>
import md5 from "md5";

export default { ...
```

Next, we can use a computed property to calculate the value we need. This will also mean it will watch out for any changes in the user, and update the UI:

```javascript
  computed: {
    gravatar() {

    }
  }
```

Using the md5 package, we can hash the users email:

```javascript
  computed: {
    gravatar() {
      const hash = md5(this.user.email)
    }
  }
```

We then call the trim() method to remove the whitespace, and lower case the email too:

```javascript
  computed: {
    gravatar() {
      const hash = md5(this.user.email.trim().toLowerCase());
    }
  }
```

Now we have the hash, we use it to create a URL to make a "GET" request, which looks like this:

https<span></span>://www<span></span>.gravatar.com/avatar/HASH

To create this, we just need to return the URL as our computed value:

```javascript
  computed: {
    gravatar() {
      const hash = md5(this.user.email.trim().toLowerCase());
      return `https://www.gravatar.com/avatar/${hash}`;
    }
  }
```

Then in the template, we use the computed value as the image src (don't forget the colon before src since we are using a dynamic value):

```html
<img :src="gravatar" alt="user profile image"  />
```

And you should see a Gravatar in the browser!

If you don't have your own Gravatar image set, you may see the default image. Personally, I like to change this.

You can either use your own alternative default image, or change the default set by Gravatar.

To use your own, you can add the ?d= parameter, with a URL to your chosen image:

```javascript
return `https://www.gravatar.com/avatar/${hash}?d=https://upload.wikimedia.org/wikipedia/en/0/02/Homer_Simpson_2006.png`;
```

Or, use one of the other defaults provided by Gravatar (<http://en.gravatar.com/site/implement/images/>) like this:

```javascript
return `https://www.gravatar.com/avatar/${hash}?d=robohash`;
```

And you can also use the "s" parameter too, which will set the Gravatar size:

```javascript
return `https://www.gravatar.com/avatar/${hash}?d=robohash&s=200`;
```

Above we set the width to be 200px x 200px, but the accepted range can be 1px-2048px.

You can also find some more options at <http://en.gravatar.com/site/implement/images/>, which is worth checking if you want further customisation.