From 28ce9800610f4138a3980e602b7ac3bb5fedae2d Mon Sep 17 00:00:00 2001
From: Yufan Sheng <syhily@gmail.com>
Date: Wed, 19 Jun 2024 03:59:00 +0800
Subject: [PATCH] fix: the avatar in comment form.

---
 src/assets/scripts/yufan.me.js        | 5 +++--
 src/components/comment/Comments.astro | 5 ++++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/assets/scripts/yufan.me.js b/src/assets/scripts/yufan.me.js
index 82be599..5f29f07 100644
--- a/src/assets/scripts/yufan.me.js
+++ b/src/assets/scripts/yufan.me.js
@@ -113,6 +113,7 @@ if (typeof comments !== 'undefined' && comments !== null) {
   // TODO: Load the commenter information from the cookie.
 
   comments.addEventListener('focusout', (event) => {
+    const avatar = document.querySelector('#commentForm img.avatar');
     if (event.target === document.querySelector('input[name="email"]')) {
       event.stopPropagation();
       const email = event.target.value;
@@ -121,11 +122,11 @@ if (typeof comments !== 'undefined' && comments !== null) {
         fetch(`/comments/avatar?email=${email}`)
           .then((res) => res.text())
           .then((link) => {
-            document.querySelector('#commentForm img.avatar').src = link;
+            avatar.src = link;
           })
           .catch((e) => console.log(e));
       } else {
-        document.querySelector('#commentForm img.avatar').src = '/images/default-avatar.png';
+        avatar.src = avatar.dataset.src;
       }
     }
   });
diff --git a/src/components/comment/Comments.astro b/src/components/comment/Comments.astro
index b5cec85..89acebc 100644
--- a/src/components/comment/Comments.astro
+++ b/src/components/comment/Comments.astro
@@ -1,6 +1,8 @@
 ---
 import { getConfig, loadComments } from '@/components/comment/artalk';
 import Comment from '@/components/comment/Comment.astro';
+import { urlJoin } from '@/helpers/tools';
+import options from '@/options';
 
 // This is a component which loads comments and renders it on server-side.
 interface Props {
@@ -25,7 +27,8 @@ const comments = config != null ? await loadComments(commentKey, title, 0, confi
             <div class="comment-from-avatar flex-avatar">
               <img
                 alt="头像"
-                src="/images/default-avatar.png"
+                src={urlJoin(options.assetsPrefix(), '/images/default-avatar.png')}
+                data-src={urlJoin(options.assetsPrefix(), '/images/default-avatar.png')}
                 class="avatar avatar-40 photo avatar-default"
                 height="40"
                 width="40"