From 067a0ea376a873b5c5f7ba372de9aad7f916b6a3 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Thu, 13 Mar 2025 10:57:21 -0400
Subject: [PATCH] [Bug] Fix absolute path issue for workflow templates (#3020)

---
 src/components/templates/TemplateWorkflowCard.vue | 5 +++--
 src/scripts/api.ts                                | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/templates/TemplateWorkflowCard.vue b/src/components/templates/TemplateWorkflowCard.vue
index 35d1a48ec9..aa89865061 100644
--- a/src/components/templates/TemplateWorkflowCard.vue
+++ b/src/components/templates/TemplateWorkflowCard.vue
@@ -82,6 +82,7 @@ import AudioThumbnail from '@/components/templates/thumbnails/AudioThumbnail.vue
 import CompareSliderThumbnail from '@/components/templates/thumbnails/CompareSliderThumbnail.vue'
 import DefaultThumbnail from '@/components/templates/thumbnails/DefaultThumbnail.vue'
 import HoverDissolveThumbnail from '@/components/templates/thumbnails/HoverDissolveThumbnail.vue'
+import { api } from '@/scripts/api'
 import { TemplateInfo } from '@/types/workflowTemplateTypes'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 
@@ -103,8 +104,8 @@ const isHovered = useElementHover(cardRef)
 const getThumbnailUrl = (index = '') => {
   const basePath =
     sourceModule === 'default'
-      ? `templates/${template.name}`
-      : `api/workflow_templates/${sourceModule}/${template.name}`
+      ? api.fileURL(`/templates/${template.name}`)
+      : api.apiURL(`/workflow_templates/${sourceModule}/${template.name}`)
 
   // For templates from custom nodes, multiple images is not yet supported
   const indexSuffix = sourceModule === 'default' && index ? `-${index}` : ''
diff --git a/src/scripts/api.ts b/src/scripts/api.ts
index 8a26379ee6..655974afb7 100644
--- a/src/scripts/api.ts
+++ b/src/scripts/api.ts
@@ -419,7 +419,7 @@ export class ComfyApi extends EventTarget {
    * Gets the index of core workflow templates.
    */
   async getCoreWorkflowTemplates(): Promise<WorkflowTemplates[]> {
-    const res = await axios.get('/templates/index.json')
+    const res = await axios.get(this.fileURL('/templates/index.json'))
     const contentType = res.headers['content-type']
     return contentType?.includes('application/json') ? res.data : []
   }