Zaimki/components/Avatar.vue

<template>
    <img :src="gravatar" alt="" class="rounded-circle"/>
</template>

<script>
    import md5 from 'js-md5';
    import { Base64 } from 'js-base64';

    export default {
        props: {
            user: { required: true },
            size: { 'default': 128 }
        },
        computed: {
            gravatar(email, size = 128) {
                const fallback = `https://avi.avris.it/${this.size}/${Base64.encode(this.user.username).replace(/\+/g, '-').replace(/\//g, '_')}.png`;

                return `https://www.gravatar.com/avatar/${this.user.emailHash || md5(this.user.email)}?d=${encodeURIComponent(fallback)}&s=${this.size}`;
            }
        },
    }
</script>

<style lang="scss" scoped>
    $size: 6rem;
    img {
        width: 100%;
        max-width: $size;
        max-height: $size;
    }
</style>