diff --git a/README.md b/README.md
index 0bdfc6a..7473b99 100644
--- a/README.md
+++ b/README.md
@@ -14,12 +14,12 @@
 
 ## 快速上手
 
-首先，你需要在 GitHub 上选择 `Use this template` 按钮，然后填写相应信息，创建一个新的仓库。将 `vue.config.js` 中的 `publicPath` 设置为你仓库的名称（部署路径，如果你打算部署在根上则设置为 `/` 或直接删除该行），编辑 `album` 目录中的 `meta.yml` 文件和里面的照片，然后直接提交到仓库，GitHub Actions 会自动构建并部署到 GitHub Pages。
+首先，你需要在 GitHub 上选择 `Use this template` 按钮，然后填写相应信息，创建一个新的仓库。将 `./vue.config.js` 和 `./src/js/utils.js`中的 `publicPath` 设置为你仓库的名称（部署路径，如果你打算部署在根上则设置为 `/` 或直接删除该行），编辑 `album` 目录中的 `meta.yml` 文件和里面的照片，然后直接提交到仓库，GitHub Actions 会自动构建并部署到 GitHub Pages。
 
 ### album 目录结构
 
 ```
-~/album
+./album
 ├── meta.yml          # 相册信息
 └── travel            # 照片目录，与 meta.yml 中的相册名对应
     ├── IMG_0001.jpg  # 照片文件，文件名可自定义
diff --git a/src/components/Content.vue b/src/components/Content.vue
index 1890a6f..cb06ae8 100644
--- a/src/components/Content.vue
+++ b/src/components/Content.vue
@@ -187,7 +187,7 @@ export default {
       this.response_load_new = true;
     },
     get_thumbnail_image(alumn_name ,image_name) {
-      return `/api/${alumn_name}/${this.password}_cache/${image_name}`;
+      return `${utils.publicPath}/api/${alumn_name}/${this.password}_cache/${image_name}`;
     },
 
     async initialize() {
diff --git a/src/components/Preview.vue b/src/components/Preview.vue
index 2b22e22..7fafd4a 100644
--- a/src/components/Preview.vue
+++ b/src/components/Preview.vue
@@ -22,6 +22,7 @@
 <script>
 import '../css/style.css';
 import '../css/preview.css';
+import utils from "@/js/utils";
 
 export default {
   name: "Preview",
@@ -36,10 +37,10 @@ export default {
       return this.current_photo_filename.replace(/\.[a-z|A-Z|0-9]*$/g, "");
     },
     thumbnail_path() {
-      return `/api/${this.current_album_name}/${this.password}_cache/${this.current_photo_filename}`;
+      return `${utils.publicPath}/api/${this.current_album_name}/${this.password}_cache/${this.current_photo_filename}`;
     },
     photo_path() {
-      return `/api/${this.current_album_name}/${this.password || 'raw'}/${this.current_photo_filename}`;
+      return `${utils.publicPath}/api/${this.current_album_name}/${this.password || 'raw'}/${this.current_photo_filename}`;
     },
   },
   methods: {
@@ -47,10 +48,10 @@ export default {
       this.$emit('hide-preview');
     },
     thumbnail_path_at_index(i) {
-      return `/api/${this.image_list[i].al}/_cache/${this.image_list[i].name}`;
+      return `${utils.publicPath}/api/${this.image_list[i].al}/_cache/${this.image_list[i].name}`;
     },
     photo_path_at_index(i) {
-      return `/api/${this.image_list[i].al}/raw/${this.image_list[i].name}`;
+      return `${utils.publicPath}/api/${this.image_list[i].al}/raw/${this.image_list[i].name}`;
     },
     downloadPhoto() {
       window.open(this.photo_path);
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 11fe5b6..fba9e38 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -51,7 +51,7 @@
 
         <!-- preview.jpg -->
         <div style="position: relative">
-          <div class="list_img" :style="{ backgroundImage: `url(/api/${album.name}/${album.preview||'preview.jpg'})` }"></div>
+          <div class="list_img" :style="{ backgroundImage: `url(${publicPath}/api/${album.name}/${album.preview||'preview.jpg'})` }"></div>
           <span style="margin-left: 27px;">{{ album.friendly_name }}</span>
         </div>
 
@@ -69,6 +69,7 @@ import utils from "@/js/utils";
 import IconBase from "@/icons/IconBase";
 import IconSideBar from "@/icons/IconSideBar";
 import IconExit from "@/icons/IconExit";
+import { publicPath } from '../../vue.config';
 
 export default {
   name: "Sidebar",
@@ -79,6 +80,7 @@ export default {
     selected_album_name: '_default',
     show_banner: true,
     shouldShowSemiTransparentNavBar: false,
+    publicPath: utils.publicPath,
   }),
   async mounted() {
     const args = await utils.parse_args();
diff --git a/src/js/utils.js b/src/js/utils.js
index dace791..138627c 100644
--- a/src/js/utils.js
+++ b/src/js/utils.js
@@ -1,3 +1,5 @@
+const publicPath = '/iAlbum';
+
 function parse_args() {
     let _args = {};
     let args = location.href.split("?")[1];
@@ -12,7 +14,7 @@ function parse_args() {
 
 function get_json(url) {
     return new Promise((resolve, reject) => {
-        fetch(`/api/${url}.json`).then(function(response) {
+        fetch(`${publicPath}/api/${url}.json`).then(function(response) {
             if(response.ok) {
                 return resolve(response.json())
             }
@@ -99,6 +101,7 @@ function GetFileContent(ext='.txt') {
 }
 
 export default {
+    publicPath: publicPath,
     parse_args: parse_args,
     get_json: get_json,
     md5_transform: md5_transform,