익명일 경우 익명 이미지로

src/common/common.js

@@ -124,12 +124,26 @@ const common = {
      * @param { String } profileImg
      * @returns
      */
-    getProfileImage(profileImg) {
+    getProfileImage(profileImg, isAnonymous = false) {
-        let profileImgUrl = '/img/icons/icon.png'; // 기본 프로필 이미지 경로
+        console.log('profileImg: ', profileImg);
+        const defaultProfileImg = '/img/icons/icon.png'; // 기본 프로필 이미지 경로
+        const anonymousImg = '/img/avatars/default-Profile.jpg'; // 익명 이미지
+        let profileImgUrl = isAnonymous ? anonymousImg : defaultProfileImg;
+        console.log('profileImgUrl: ', profileImgUrl);
         const UserProfile = `${import.meta.env.VITE_SERVER}upload/img/profile/${profileImg}`;
 
         return !profileImg || profileImg === '' ? profileImgUrl : UserProfile;
     },
+
+    setDefaultImage(event, deafultImg = '/img/icons/icon.png') {
+        console.log('deafultImg: ', deafultImg);
+        console.log('event: ', event);
+        return (event.target.src = deafultImg);
+    },
+    showImage(event) {
+        console.log('event: ', event);
+        return (event.target.style.visibility = 'visible');
+    },
 };
 
 export default {

src/components/board/BoardProfile.vue

@@ -2,7 +2,13 @@
     <div class="d-flex align-items-center flex-wrap">
         <div class="d-flex align-items-center">
             <div class="avatar me-2">
-                <img :src="getProfileImage(profileImg)" alt="Avatar" class="rounded-circle" />
+                <img
+                    :src="getProfileImage(profileImg)"
+                    alt="user"
+                    class="rounded-circle"
+                    @error="setDefaultImage($event)"
+                    @load="showImage($event)"
+                />
             </div>
 
             <div class="me-2">
@@ -120,6 +126,14 @@
 
     // 프로필 이미지 경로 설정
     const getProfileImage = profileImg => {
-        return $common.getProfileImage(profileImg);
+        return $common.getProfileImage(profileImg, true);
+    };
+
+    const setDefaultImage = e => {
+        return $common.setDefaultImage(e);
+    };
+
+    const showImage = e => {
+        return $common.showImage(e);
     };
 </script>