feat: resolve the issue of image loading failure (#12)

Author: wuyiping0628

.vitepress/theme/Home.vue

@@ -11,7 +11,7 @@
           <div class="row1">
             <img
               class="avatar"
-              :src="item.icon"
+              :src="getImgUrl(item.icon)"
             />
             <div class="row1-right">
               <div class="row1-title">{{ item.title }}</div>
@@ -22,7 +22,7 @@
           <div class="row2">
             <img
               class="main-img"
-              :src="item.imgUrl"
+              :src="getImgUrl(item.imgUrl)"
               alt="主图"
             />
           </div>
@@ -42,6 +42,13 @@
   </div>
 </template>
 <script setup>
+import { useData } from "vitepress";
+
+const { site } = useData();
+
+const getImgUrl = (imgPath) => {
+  return site.value.base + imgPath;
+};
 
 const homeList = [
       {

.vitepress/theme/components/CustomHeader.vue

@@ -8,11 +8,11 @@
           <div class="logo-section">
             <a href="/" class="logo-link">
               <img
-                :src="
+                :src="getImgUrl(
                   isDark
                     ? 'images/logo2.svg'
                     : 'images/logo2.svg'
-                "
+                )"
                 alt="OpenTiny NEXT"
                 class="logo-icon"
               />
@@ -111,11 +111,11 @@
             <div class="mb-logo">
               <a href="/" class="logo-link">
                 <img
-                  :src="
+                 :src="getImgUrl(
                     isDark
                       ? 'images/logo2.svg'
                       : 'images/logo2.svg'
-                  "
+                  )"
                   alt="OpenTiny NEXT"
                   class="logo-icon"
                 />
@@ -194,7 +194,7 @@
             class="home-link home-link-mb"
           >
             <img
-              :src="'images/logo.svg'"
+              :src="getImgUrl('images/logo.svg')"
               alt="OpenTiny NEXT"
               class="logo-icon"
             />
@@ -233,6 +233,9 @@ const router = useRouter();
 // 获取主题配置
 const themeConfig = computed(() => theme.value);
 
+const getImgUrl = (imgPath) => {
+  return site.value.base + imgPath;
+};
 
 
 // 是否显示导航栏: 如果当前路径是首页，则不显示导航栏

.vitepress/theme/components/customContent.vue

@@ -4,7 +4,7 @@
       <div class="home-logo">
         <a :href="backHome" rel="noopener noreferrer">
           <img
-            :src="isDark ? 'images/mini-logo.svg' : 'images/mini-logo.svg'"
+            :src="getImgUrl(isDark ? 'images/mini-logo.svg' : 'images/mini-logo.svg') "
             class="home-logo-icon"
           />
         </a>
@@ -20,7 +20,7 @@
       >
         <a :href="iconList.link" rel="noopener noreferrer">
           <img
-            :src="iconList.isActive ? iconList.srcActive : iconList.src"
+            :src="getImgUrl(iconList.isActive ? iconList.srcActive : iconList.src)"
             class="icon"
           />
         </a>
@@ -32,7 +32,7 @@
     </div>
     <div class="sidebar-mb" @click="showModal = true">
       <img
-        :src="isDark ? 'images/menu.svg' : 'images/menu.svg'"
+        :src="getImgUrl(isDark ? 'images/menu.svg' : 'images/menu.svg')"
         class="menu-mb"
       />
     </div>
@@ -61,7 +61,7 @@
         <div class="home-logo-mb">
           <a href="/" class="logo-link">
             <img
-              :src="isDark ? 'images/logo2.svg' : 'images/logo2.svg'"
+              :src="getImgUrl(isDark ? 'images/logo2.svg' : 'images/logo2.svg')"
               alt="OpenTiny NEXT"
               class="logo-icon"
             />
@@ -77,7 +77,7 @@
             <a :href="tab.link" rel="noopener noreferrer">
               <img
                 class="avatar"
-                :src="tab.isActive ? tab.srcActive : tab.src"
+                :src="getImgUrl(tab.isActive ? tab.srcActive : tab.src)"
               />
               <div class="modal-tab-right">
                 <div class="modal-tab-title">{{ tab.title }}</div>
@@ -131,7 +131,7 @@
             class="home-link home-link-mb"
           >
             <img
-              :src="'images/logo.svg'"
+              :src="getImgUrl('images/logo.svg')"
               alt="OpenTiny NEXT"
               class="logo-icon"
             />
@@ -168,6 +168,10 @@ const showModal = ref(false);
 const backHome = ref('/');
 backHome.value = site.value.base;
 
+const getImgUrl = (imgPath) => {
+  return site.value.base + imgPath;
+};
+
 const iconLists = reactive([
   {
     src: "images/tiny-vue-logo.svg",