CreateAvatar not working

[Tomo5524]

I am trying to get URL with CreateAvatar but it seems not to be working. I store all the avatar info in localstorage when it was created in another component (in which everything worked) but in Header component, CreateAvatar does not work. I know there is Proxy object in console but believe it does not affect anything.

Pasted my code below:

<template>
     
 <img
    v-if="avatarSvg"
    :src="avatarSvg"  
    alt="avatar"
    class="avatar-with my-3"
  />
  <img
     v-else
     src="https://img.icons8.com/material-outlined/24/000000/user--v1.png"
     class="user-icon"
  />            
</template>

<script>
import { ref, onMounted  } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { createAvatar } from "@dicebear/avatars";
import * as style from "@dicebear/open-peeps";
export default {
  setup() {
    const avatarSvg = ref("");
    const store = useStore();
    // get user info
    const { user } = store.getters.getUser;

   onMounted(async () => {
      if (user !== undefined && user.avatar.style !== undefined) {
        avatarSvg.value = await createAvatar(user.avatar.style, {
          dataUri: true,
          base64: true,
        });
        // this one works just fine
        // avatarSvg.value = await createAvatar(style, {
          // dataUri: true,
          // base64: true,
        });
      }
    });
    return {
      user,
      avatarSvg,
    };
  },
};
</script>

user.avatar.style and style are exactly the same except user.avatar.style is coming from localstorage.

I also get the following error message in console:
Uncaught TypeError: t.create is not a function
at Proxy.Qt (index.umd.js?b41d:32)
at eval (Header.vue?0418:40)
at Proxy.renderFnWithContext (runtime-core.esm-bundler.js?5c40:1124)
at _render (headlessui.esm.js?d511:173)
at render (headlessui.esm.js?d511:133)
at Proxy.render$1 (headlessui.esm.js?d511:2410)
at renderComponentRoot (runtime-core.esm-bundler.js?5c40:1167)
at componentEffect (runtime-core.esm-bundler.js?5c40:5220)
at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
at effect (reactivity.esm-bundler.js?a1e9:17)

Any help would be greatly appreciated.

[FlorianKoerner]

The avatar style is an object with functions. Functions cannot be stored in LocalStorage. These functions will be removed automatically and you will miss them after reading them from the local storage.

I'm not quite clear what you're trying to do by storing the style in LocalStorage.

[Tomo5524]

Thanks for your reply.

What I am trying to do here is that when a user signs up, they choose avatar whose info will be stored in db. when that user logs in, avatar icon should be displayed. I could fetch avatar info from server but I naively thought storing it in localstorage would be better. I am open to any better practice though. Thanks

[FlorianKoerner]

You could work with the "seed" option. The same seed, creates the same avatar over and over again. Or you can save the created avatar in the LocalStorage.

With seed

import { createAvatar } from "@dicebear/avatars";
import * as style from "@dicebear/open-peeps";

// Write
const seed = 'your-seed';
const avatar = createAvatar(style, {
     seed: seed,
     dataUri: true,
});
localStorage.setItem('seed', seed);

// Read
const seed = localStorage.getItem('seed');
const avatar = createAvatar(user.avatar.style, {
     seed: seed,
     dataUri: true,
});

With result

import { createAvatar } from "@dicebear/avatars";
import * as style from "@dicebear/open-peeps";

// Write
const avatar = createAvatar(style, {
     dataUri: true,
});
localStorage.setItem('avatar', avatar);

// Read
const avatar = localStorage.getItem('avatar');

[Tomo5524]

Thank you for your reply.

I decided to store it in localstorage and it is working. However, I run into another issue when I try to display another user’s avatar which is not stored in localstorage. Their avatar is stored in database (postgresql). But when I fetched it, the data fetched from the server seemed different than when I first sent it to the server. It turned out that when the avatar info was stored in database, it is a bit different than what I got from creteavatar function (svg url). It would be really appreciated if you could answer the following questions: 1) there is an empty string (:"") at the very end of svg url that was stored in database. Why and should I get rid of it? 2) there are curly brackets at the beginning and end of svg url stored in database. Why and should I get rid of it? 3) it looks like the svg url I got from creteavatar function is encoded, so should it be encoded when it goes into database? 4) what data type should I use for svg url? I use VARCHAR (BYTEA could be better but I am entirely sure) for now. 6) when I send svg url to backend, should I stringify it?

If there is any better practice for storing svg url in database, please let me know.

Thanks.