How to add a Gravatar in Vue.js

Adding a Gravatar (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:

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:

  data() {
    return {
      user: {
        email: "[e-mail]"
      }
    };
  },

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

// npm
npm i md5

// yarn
yarn add md5

Then import into our component's script section:

<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:

  computed: {
    gravatar() {

    }
  }

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

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

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

  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://www.gravatar.com/avatar/HASH

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

  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):

<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:

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:

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

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

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.

Comments

[Tori Pugh]

I was looking for how to do this and this article was even more helpful than I thought. Thanks for writing it!

[Chris Dixon]

yeah it's amazing the things we use everyday but never think about its meaning!