🐛 Fix(custom): fix static assets bugs

electron-builder.json

@@ -10,7 +10,7 @@
   "extraResources": [
     {
       "from": "resources",
-      "to": "resources",
+      "to": ".",
       "filter": ["**/*"]
     }
   ],

electron.vite.config.js

@@ -7,7 +7,6 @@ import vue from '@vitejs/plugin-vue'
 import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
 export default defineConfig({
   main: {
-    // Main process configuration
     plugins: [
       externalizeDepsPlugin()
     ],
@@ -23,7 +22,6 @@ export default defineConfig({
     }
   },
   preload: {
-    // Preload scripts configuration
     plugins: [externalizeDepsPlugin(),
       VueI18nPlugin({
       /* options */
@@ -41,12 +39,8 @@ export default defineConfig({
     }
   },
   renderer: {
-    // Renderer process configuration
     root: resolve('src/renderer'),
-    publicDir: resolve('./public'),
-    build: {
-      outDir: resolve('dist/renderer')
-    },
+    base: './',
     resolve: {
       alias: {
         '@': resolve('src/renderer'),

src/main/apis/app/window/windowList.ts

@@ -181,7 +181,7 @@ windowList.set(IWindowList.TRAY_WINDOW, {
     if (!app.isPackaged && process.env.ELECTRON_RENDERER_URL) {
       window.loadURL(process.env.ELECTRON_RENDERER_URL)
     } else {
-      window.loadFile(path.join(__dirname, '../render/index.html'))
+      window.loadFile(path.join(__dirname, '../renderer/index.html'))
     }
     window.on('blur', () => {
       window.hide()
@@ -197,7 +197,7 @@ windowList.set(IWindowList.SETTING_WINDOW, {
     if (!app.isPackaged && process.env.ELECTRON_RENDERER_URL) {
       window.loadURL(`${process.env.ELECTRON_RENDERER_URL}#main-page/upload`)
     } else {
-      window.loadFile(path.join(__dirname, '../render/index.html'), {
+      window.loadFile(path.join(__dirname, '../renderer/index.html'), {
         hash: 'main-page/upload'
       })
     }
@@ -222,7 +222,7 @@ windowList.set(IWindowList.MINI_WINDOW, {
     if (!app.isPackaged && process.env.ELECTRON_RENDERER_URL) {
       window.loadURL(`${process.env.ELECTRON_RENDERER_URL}#mini-page`)
     } else {
-      window.loadFile(path.join(__dirname, '../render/index.html'), {
+      window.loadFile(path.join(__dirname, '../renderer/index.html'), {
         hash: 'mini-page'
       })
     }
@@ -238,7 +238,7 @@ windowList.set(IWindowList.RENAME_WINDOW, {
     if (!app.isPackaged && process.env.ELECTRON_RENDERER_URL) {
       window.loadURL(`${process.env.ELECTRON_RENDERER_URL}#rename-page`)
     } else {
-      window.loadFile(path.join(__dirname, '../render/index.html'), {
+      window.loadFile(path.join(__dirname, '../renderer/index.html'), {
         hash: 'rename-page'
       })
     }
@@ -260,7 +260,7 @@ windowList.set(IWindowList.TOOLBOX_WINDOW, {
     if (!app.isPackaged && process.env.ELECTRON_RENDERER_URL) {
       window.loadURL(`${process.env.ELECTRON_RENDERER_URL}#toolbox-page`)
     } else {
-      window.loadFile(path.join(__dirname, '../render/index.html'), {
+      window.loadFile(path.join(__dirname, '../renderer/index.html'), {
         hash: 'toolbox-page'
       })
     }

src/renderer/components/ImageLocal.vue

@@ -11,7 +11,7 @@
       :src="
         isShowThumbnail && item.isImage
           ? base64Image
-          : `/assets/icons/${getFileIconPath(item.fileName ?? '')}`
+          : `./assets/icons/${getFileIconPath(item.fileName ?? '')}`
       "
       alt=""
       class="image"
@@ -20,7 +20,7 @@
     >
     <img
       v-else
-      :src="`/assets/icons/${getFileIconPath(item.fileName ?? '')}`"
+      :src="`./assets/icons/${getFileIconPath(item.fileName ?? '')}`"
       alt=""
       class="image"
     >

src/renderer/components/ImagePreSign.vue

@@ -48,10 +48,10 @@ const props = defineProps<{
 const imageSource = computed(() => {
   return props.isShowThumbnail && props.item.isImage
     ? preSignedUrl.value
-    : `/assets/icons/${getFileIconPath(props.item.fileName ?? '')}`
+    : `./assets/icons/${getFileIconPath(props.item.fileName ?? '')}`
 })
 
-const iconPath = computed(() => `/assets/icons/${getFileIconPath(props.item.fileName ?? '')}`)
+const iconPath = computed(() => `./assets/icons/${getFileIconPath(props.item.fileName ?? '')}`)
 
 async function getUrl () {
   try {

src/renderer/components/ImageWebdav.vue

@@ -49,10 +49,10 @@ const props = defineProps<{
 const imageSource = computed(() => {
   return props.isShowThumbnail && props.item.isImage && success.value
     ? base64Url.value
-    : `/assets/icons/${getFileIconPath(props.item.fileName ?? '')}`
+    : `./assets/icons/${getFileIconPath(props.item.fileName ?? '')}`
 })
 
-const iconPath = computed(() => `/assets/icons/${getFileIconPath(props.item.fileName ?? '')}`)
+const iconPath = computed(() => `./assets/icons/${getFileIconPath(props.item.fileName ?? '')}`)
 
 async function getWebdavHeader (key: string) {
   let headers = {} as any

src/renderer/components/ui/TitleBar.vue

@@ -7,7 +7,7 @@
       <div class="title-left">
         <div class="app-icon">
           <img
-            src="/roundLogo.png"
+            :src="defaultLogo"
             alt="App Icon"
             width="20"
             height="20"
@@ -75,13 +75,14 @@
 
 <script setup lang="ts">
 import { MinusIcon, PinIcon, ShrinkIcon, XIcon } from 'lucide-vue-next'
-import { onBeforeMount, onBeforeUnmount, ref } from 'vue'
+import { computed, onBeforeMount, onBeforeUnmount, ref } from 'vue'
 
 import { IRPCActionType } from '@/utils/enum'
 
 const isShowprogress = ref(false)
 const progress = ref(0)
 const isAlwaysOnTop = ref(false)
+const defaultLogo = computed(() => `${import.meta.env.BASE_URL}roundLogo.png`)
 
 function setAlwaysOnTop () {
   isAlwaysOnTop.value = !isAlwaysOnTop.value

src/renderer/main.ts

@@ -42,8 +42,8 @@ const i18n = createI18n<[MessageSchema], 'en' | 'zh-CN' | 'zh-TW'>({
 const pinia = createPinia()
 pinia.use(piniaPluginPersistedstate)
 app.use(VueLazyLoad, {
-  loading: '/loading.jpg',
-  error: '/unknown-file-type.svg',
+  loading: './loading.jpg',
+  error: './unknown-file-type.svg',
   delay: 500
 })
 app.use(i18n)

src/renderer/manage/pages/BucketPage.vue

@@ -460,7 +460,7 @@
                     >
                     <img
                       v-else
-                      :src="`/assets/icons/${getFileIconPath(item.fileName ?? '')}`"
+                      :src="`./assets/icons/${getFileIconPath(item.fileName ?? '')}`"
                       class="file-image"
                     >
                   </template>
@@ -495,7 +495,7 @@
                   <!-- Default File Icon -->
                   <template v-else-if="!item.isDir">
                     <img
-                      :src="`/assets/icons/${getFileIconPath(item.fileName ?? '')}`"
+                      :src="`./assets/icons/${getFileIconPath(item.fileName ?? '')}`"
                       class="file-image"
                     >
                   </template>
@@ -622,7 +622,7 @@
                     >
                     <img
                       v-else
-                      :src="`/assets/icons/${getFileIconPath(item.fileName ?? '')}`"
+                      :src="`./assets/icons/${getFileIconPath(item.fileName ?? '')}`"
                       style="width: 32px; height: 32px; object-fit: contain;"
                     >
                   </template>

src/renderer/manage/pages/LogInPage.vue

@@ -45,7 +45,7 @@
               />
               <img
                 v-else
-                :src="`/assets/${item.key}.webp`"
+                :src="`./assets/${item.key}.webp`"
                 class="tab-icon"
                 :alt="item.name"
               >
@@ -85,7 +85,7 @@
             >
               <div class="config-header">
                 <img
-                  :src="`/assets/${item.picBedName}.webp`"
+                  :src="`./assets/${item.picBedName}.webp`"
                   class="config-icon"
                   :alt="item.picBedName"
                 >

src/renderer/manage/pages/ManageMain.vue

@@ -6,7 +6,7 @@
         <div class="header-content">
           <div class="header-icon">
             <img
-              :src="`/assets/${currentPagePicBedConfig.picBedName}.webp`"
+              :src="`./assets/${currentPagePicBedConfig.picBedName}.webp`"
               class="header-icon-img"
             >
           </div>
@@ -176,7 +176,7 @@
             >
               <div class="card-icon">
                 <img
-                  :src="`/assets/${config.picBedName}.webp`"
+                  :src="`./assets/${config.picBedName}.webp`"
                   class="picbed-icon"
                 >
               </div>
@@ -223,7 +223,7 @@
             <div class="form-header">
               <div class="form-icon">
                 <img
-                  :src="`/assets/${currentPicBedName}.webp`"
+                  :src="`./assets/${currentPicBedName}.webp`"
                   class="picbed-form-icon"
                 >
               </div>

src/renderer/pages/Gallery.vue

@@ -318,7 +318,7 @@
             >
               <img
                 :src="imageErrorStates[item.key || '']
-                  ? '/errorLoading.png'
+                  ? './errorLoading.png'
                   : isAlwaysForceReload ? addCacheBustParam(item.src) : item.src"
                 class="gallery-image"
                 :class="{ loading: !imageLoadStates[item.key || ''] }"

src/renderer/pages/MiniPage.vue

@@ -14,7 +14,7 @@
     >
       <img
         v-if="!dragover && !isShowingProgress"
-        :src="logoPath ? logoPath : '/squareLogo.png'"
+        :src="logoPath ? logoPath : './squareLogo.png'"
         style="width: 100%; height: 100%; border-radius: 50%"
         draggable="false"
         @dragstart.prevent

src/renderer/pages/Plugin.vue

@@ -126,7 +126,7 @@
           <img
             class="plugin-logo"
             :src="item.logo"
-            :onerror="defaultLogo"
+            :onerror="setSrc"
             alt=""
           >
           <div class="plugin-info">
@@ -331,9 +331,13 @@ const pluginNameList = ref<string[]>([])
 const loading = ref(true)
 const needReload = ref(false)
 const latestVersionMap = reactive<{ [key: string]: string }>({})
-const defaultLogo = ref('this.src=\'/roundLogo.png\'')
 const $configForm = ref<InstanceType<typeof ConfigForm> | null>(null)
 
+function setSrc (e: Event) {
+  const target = e.target as HTMLImageElement
+  target.src = import.meta.env.BASE_URL + 'roundLogo.png'
+}
+
 const npmSearchText = computed(() => {
   return searchText.value.match('picgo-plugin-')
     ? searchText.value

src/renderer/pages/Toolbox.vue

@@ -146,8 +146,8 @@ import type { IToolboxMap } from '#/types/view'
 
 const { t } = useI18n()
 const { confirm } = useConfirm()
-const defaultLogo = ref('/roundLogo.png')
 const activeTypes = ref<string[]>([])
+const defaultLogo = computed(() => `${import.meta.env.BASE_URL}roundLogo.png`)
 const fixList = reactive<IToolboxMap>({
   [IToolboxItemType.IS_CONFIG_FILE_BROKEN]: {
     title: t('pages.toolbox.checkConfigFileBroken'),