diff --git a/app/components/User/Avatar.vue b/app/components/User/Avatar.vue
index e78d320541..36916e28d1 100644
--- a/app/components/User/Avatar.vue
+++ b/app/components/User/Avatar.vue
@@ -31,12 +31,15 @@ const textClass = computed(() => {
   }
 })
 
-const { data: gravatarUrl } = useLazyFetch(() => `/api/gravatar/${props.username}`, {
-  transform: res => (res.hash ? `/_avatar/${res.hash}?s=128&d=404` : null),
-  getCachedData(key, nuxtApp) {
-    return nuxtApp.static.data[key] ?? nuxtApp.payload.data[key]
+const { data: gravatarUrl } = useLazyFetch(
+  () => `/api/gravatar/${encodeURIComponent(props.username)}`,
+  {
+    transform: res => (res.hash ? `/_avatar/${res.hash}?s=128&d=404` : null),
+    getCachedData(key, nuxtApp) {
+      return nuxtApp.static.data[key] ?? nuxtApp.payload.data[key]
+    },
   },
-})
+)
 </script>
 
 <template>