self-sovereign-id/src/components/Libravatar.vue

<template>
<img v-bind:src="getAvatar(email)"/>
</template>

<script>
export default {
    name: "Libravatar",
    data() {
        return {
        }
    },
    props: ["email","size"],
    methods: {
        getAvatar: function(email) {
            let hexval = this.getHash(email);
            return `https://www.libravatar.org/avatar/${hexval}?s=${this.size}`;
        },
        getHash: function(text) {
            try {
                const crypto = require('crypto');
                const hash = crypto.createHash('sha256')
                      .update(text)
                      .digest('hex');
                return hash;
            } catch (err) {
                console.log('crypto support is disabled!');
            }
        }
    }
}
</script>