diff --git a/frontend/src/components/DeDrag/index.vue b/frontend/src/components/DeDrag/index.vue
index 4641aae1be..d232e01bf5 100644
--- a/frontend/src/components/DeDrag/index.vue
+++ b/frontend/src/components/DeDrag/index.vue
@@ -81,6 +81,7 @@ import { mapState } from 'vuex'
 import EditBar from '@/components/canvas/components/Editor/EditBar'
 import MobileCheckBar from '@/components/canvas/components/Editor/MobileCheckBar'
 import { hexColorToRGBA } from '@/views/chart/chart/util'
+import {imgUrlTrans} from "@/components/canvas/utils/utils";
 
 export default {
   replace: true,
@@ -594,7 +595,7 @@ export default {
         style['border-radius'] = (this.element.commonBackground.borderRadius || 0) + 'px'
         if (this.element.commonBackground.enable) {
           if (this.element.commonBackground.backgroundType === 'outerImage' && typeof this.element.commonBackground.outerImage === 'string') {
-            style['background'] = `url(${this.element.commonBackground.outerImage}) no-repeat ${colorRGBA}`
+            style['background'] = `url(${imgUrlTrans(this.element.commonBackground.outerImage)}) no-repeat ${colorRGBA}`
           } else {
             style['background-color'] = colorRGBA
           }
diff --git a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
index c688aa6fbc..92dca2fb45 100644
--- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
+++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
@@ -58,6 +58,7 @@ import EditBar from '@/components/canvas/components/Editor/EditBar'
 import MobileCheckBar from '@/components/canvas/components/Editor/MobileCheckBar'
 import CloseBar from '@/components/canvas/components/Editor/CloseBar'
 import { hexColorToRGBA } from '@/views/chart/chart/util'
+import {imgUrlTrans} from "@/components/canvas/utils/utils";
 
 export default {
   components: { CloseBar, MobileCheckBar, DeOutWidget, EditBar },
@@ -155,9 +156,9 @@ export default {
         if (this.config.commonBackground.enable) {
           if (this.screenShot && this.config.commonBackground.backgroundType === 'innerImage' && typeof this.config.commonBackground.innerImage === 'string') {
             let innerImage = this.config.commonBackground.innerImage.replace('svg', 'png')
-            style['background'] = `url(${innerImage}) no-repeat ${colorRGBA}`
+            style['background'] = `url(${imgUrlTrans(innerImage)}) no-repeat ${colorRGBA}`
           } else if (this.config.commonBackground.backgroundType === 'outerImage' && typeof this.config.commonBackground.outerImage === 'string') {
-            style['background'] = `url(${this.config.commonBackground.outerImage}) no-repeat ${colorRGBA}`
+            style['background'] = `url(${imgUrlTrans(this.config.commonBackground.outerImage)}) no-repeat ${colorRGBA}`
           } else {
             style['background-color'] = colorRGBA
           }
diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue
index 22442e71fd..cf2618a374 100644
--- a/frontend/src/components/canvas/components/Editor/Preview.vue
+++ b/frontend/src/components/canvas/components/Editor/Preview.vue
@@ -75,7 +75,7 @@ import { mapState } from 'vuex'
 import ComponentWrapper from './ComponentWrapper'
 import { changeStyleWithScale } from '@/components/canvas/utils/translate'
 import { uuid } from 'vue-uuid'
-import { deepCopy } from '@/components/canvas/utils/utils'
+import {deepCopy, imgUrlTrans} from '@/components/canvas/utils/utils'
 import eventBus from '@/components/canvas/utils/eventBus'
 import elementResizeDetectorMaker from 'element-resize-detector'
 import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog'
@@ -231,7 +231,7 @@ export default {
       if (this.canvasStyleData.openCommonStyle) {
         if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
           style = {
-            background: `url(${this.canvasStyleData.panel.imageUrl}) no-repeat`,
+            background: `url(${imgUrlTrans(this.canvasStyleData.panel.imageUrl)}) no-repeat`,
             ...style
           }
         } else if (this.canvasStyleData.panel.backgroundType === 'color') {
diff --git a/frontend/src/components/canvas/components/Editor/PreviewMobile.vue b/frontend/src/components/canvas/components/Editor/PreviewMobile.vue
index 2445d21888..cbdab932ea 100644
--- a/frontend/src/components/canvas/components/Editor/PreviewMobile.vue
+++ b/frontend/src/components/canvas/components/Editor/PreviewMobile.vue
@@ -46,7 +46,7 @@ import { mapState } from 'vuex'
 import ComponentWrapper from './ComponentWrapper'
 import { changeStyleWithScale } from '@/components/canvas/utils/translate'
 import { uuid } from 'vue-uuid'
-import { deepCopy } from '@/components/canvas/utils/utils'
+import {deepCopy, imgUrlTrans} from '@/components/canvas/utils/utils'
 import eventBus from '@/components/canvas/utils/eventBus'
 import elementResizeDetectorMaker from 'element-resize-detector'
 import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog'
@@ -113,7 +113,7 @@ export default {
       if (this.canvasStyleData.openCommonStyle) {
         if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
           style = {
-            background: `url(${this.canvasStyleData.panel.imageUrl}) no-repeat`,
+            background: `url(${imgUrlTrans(this.canvasStyleData.panel.imageUrl)}) no-repeat`,
             ...style
           }
         } else if (this.canvasStyleData.panel.backgroundType === 'color') {
diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index f66c8c01d0..189782501b 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@@ -189,7 +189,7 @@ import DeDrag from '@/components/DeDrag'
 
 // eslint-disable-next-line no-unused-vars
 import { getStyle, getComponentRotatedStyle } from '@/components/canvas/utils/style'
-import { _$ } from '@/components/canvas/utils/utils'
+import {_$, imgUrlTrans} from '@/components/canvas/utils/utils'
 import ContextMenu from './ContextMenu'
 import MarkLine from './MarkLine'
 import Area from './Area'
@@ -968,7 +968,7 @@ export default {
       if (this.canvasStyleData.openCommonStyle) {
         if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
           style = {
-            background: `url(${this.canvasStyleData.panel.imageUrl}) no-repeat`,
+            background: `url(${imgUrlTrans(this.canvasStyleData.panel.imageUrl)}) no-repeat`,
             ...style
           }
         } else if (this.canvasStyleData.panel.backgroundType === 'color') {
diff --git a/frontend/src/components/canvas/custom-component/UserViewDialog.vue b/frontend/src/components/canvas/custom-component/UserViewDialog.vue
index 1e7684384c..c0ea007e19 100644
--- a/frontend/src/components/canvas/custom-component/UserViewDialog.vue
+++ b/frontend/src/components/canvas/custom-component/UserViewDialog.vue
@@ -42,7 +42,7 @@ import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
 import { exportDetails, innerExportDetails } from '@/api/panel/panel'
 import html2canvas from 'html2canvasde'
 import { hexColorToRGBA } from '@/views/chart/chart/util'
-import { deepCopy, exportImg } from '@/components/canvas/utils/utils'
+import {deepCopy, exportImg, imgUrlTrans} from '@/components/canvas/utils/utils'
 import { getLinkToken, getToken } from '@/utils/auth'
 export default {
   name: 'UserViewDialog',
@@ -84,7 +84,7 @@ export default {
       if (this.canvasStyleData.openCommonStyle) {
         if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
           style = {
-            background: `url(${this.canvasStyleData.panel.imageUrl}) no-repeat`,
+            background: `url(${imgUrlTrans(this.canvasStyleData.panel.imageUrl)}) no-repeat`,
             ...style
           }
         } else if (this.canvasStyleData.panel.backgroundType === 'color') {
@@ -125,9 +125,9 @@ export default {
         if (this.element.commonBackground.enable) {
           if (this.screenShot && this.element.commonBackground.backgroundType === 'innerImage' && typeof this.element.commonBackground.innerImage === 'string') {
             let innerImage = this.element.commonBackground.innerImage.replace('svg', 'png')
-            style['background'] = `url(${innerImage}) no-repeat ${colorRGBA}`
+            style['background'] = `url(${imgUrlTrans(innerImage)}) no-repeat ${colorRGBA}`
           } else if (this.element.commonBackground.backgroundType === 'outerImage' && typeof this.element.commonBackground.outerImage === 'string') {
-            style['background'] = `url(${this.element.commonBackground.outerImage}) no-repeat ${colorRGBA}`
+            style['background'] = `url(${imgUrlTrans(this.element.commonBackground.outerImage)}) no-repeat ${colorRGBA}`
           } else {
             style['background-color'] = colorRGBA
           }
diff --git a/frontend/src/components/canvas/custom-component/UserViewMobileDialog.vue b/frontend/src/components/canvas/custom-component/UserViewMobileDialog.vue
index dbb8466bd5..5c2f5cdc84 100644
--- a/frontend/src/components/canvas/custom-component/UserViewMobileDialog.vue
+++ b/frontend/src/components/canvas/custom-component/UserViewMobileDialog.vue
@@ -34,7 +34,7 @@ import DeContainer from '@/components/dataease/DeContainer'
 import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
 import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
 import PluginCom from '@/views/system/plugin/PluginCom'
-import { deepCopy } from '@/components/canvas/utils/utils'
+import {deepCopy, imgUrlTrans} from '@/components/canvas/utils/utils'
 import {hexColorToRGBA} from "@/views/chart/chart/util";
 export default {
   name: 'UserViewMobileDialog',
@@ -66,7 +66,7 @@ export default {
       if (this.canvasStyleData.openCommonStyle) {
         if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
           style = {
-            background: `url(${this.canvasStyleData.panel.imageUrl}) no-repeat`,
+            background: `url(${imgUrlTrans(this.canvasStyleData.panel.imageUrl)}) no-repeat`,
             ...style
           }
         } else if (this.canvasStyleData.panel.backgroundType === 'color') {
@@ -107,9 +107,9 @@ export default {
         if (this.element.commonBackground.enable) {
           if (this.screenShot && this.element.commonBackground.backgroundType === 'innerImage' && typeof this.element.commonBackground.innerImage === 'string') {
             let innerImage = this.element.commonBackground.innerImage.replace('svg', 'png')
-            style['background'] = `url(${innerImage}) no-repeat ${colorRGBA}`
+            style['background'] = `url(${imgUrlTrans(innerImage)}) no-repeat ${colorRGBA}`
           } else if (this.element.commonBackground.backgroundType === 'outerImage' && typeof this.element.commonBackground.outerImage === 'string') {
-            style['background'] = `url(${this.element.commonBackground.outerImage}) no-repeat ${colorRGBA}`
+            style['background'] = `url(${imgUrlTrans(this.element.commonBackground.outerImage)}) no-repeat ${colorRGBA}`
           } else {
             style['background-color'] = colorRGBA
           }
diff --git a/frontend/src/components/canvas/utils/utils.js b/frontend/src/components/canvas/utils/utils.js
index aa539fd6ed..6a1438a768 100644
--- a/frontend/src/components/canvas/utils/utils.js
+++ b/frontend/src/components/canvas/utils/utils.js
@@ -216,3 +216,12 @@ export function colorReverse(OldColorValue) {
   const str = '000000' + (0xFFFFFF - OldColorValue).toString(16)
   return '#' + str.substring(str.length - 6, str.length)
 }
+
+export function imgUrlTrans(url) {
+  if(url && url.indexOf('static-resource') > -1){
+    return process.env.VUE_APP_BASE_API + url.replace('/static-resource','static-resource')
+  }else {
+    return url
+  }
+
+}
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 25802472e5..39e4cc6ca1 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -1671,7 +1671,7 @@ export default {
     template_preview: '预览模板',
     apply: '应用',
     apply_this_template: '应用此模板',
-    market_network_tips: '查看模板市场模板需要服务器与模板市场(https://dataease.io/templates)联通，请检查网络...',
+    market_network_tips: '查看模板市场模板需要服务器与模板市场(https://dataease.io/templates)连通，请检查网络...',
     enter_name_tips: '请输入仪表板名称',
     name: '名称',
     apply_template: '应用模板',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 20b1e84037..296e831c81 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -1679,7 +1679,7 @@ export default {
     template_preview: '预览模板',
     apply: '应用',
     apply_this_template: '应用此模板',
-    market_network_tips: '查看模板市场模板需要服务器与模板市场(https://dataease.io/templates)联通，请检查网络...',
+    market_network_tips: '查看模板市场模板需要服务器与模板市场(https://dataease.io/templates)连通，请检查网络...',
     enter_name_tips: '请输入仪表板名称',
     name: '名称',
     apply_template: '应用模板',
diff --git a/frontend/src/views/background/BackgroundItem.vue b/frontend/src/views/background/BackgroundItem.vue
index b90b658aab..7a71c59462 100644
--- a/frontend/src/views/background/BackgroundItem.vue
+++ b/frontend/src/views/background/BackgroundItem.vue
@@ -17,6 +17,7 @@
 
 <script>
 import { mapState } from 'vuex'
+import {imgUrlTrans} from "@/components/canvas/utils/utils";
 
 export default {
   name: 'BackgroundItem',
@@ -38,7 +39,7 @@ export default {
     classBackground() {
       if (this.template.url) {
         return {
-          background: `url(${this.template.url}) no-repeat`,
+          background: `url(${imgUrlTrans(this.template.url)}) no-repeat`,
           'background-size': `100% 100%`
         }
       } else {
diff --git a/frontend/src/views/panel/LinkJumpSet/index.vue b/frontend/src/views/panel/LinkJumpSet/index.vue
index ec96850f77..26cef164c6 100644
--- a/frontend/src/views/panel/LinkJumpSet/index.vue
+++ b/frontend/src/views/panel/LinkJumpSet/index.vue
@@ -261,6 +261,7 @@ import 'codemirror/keymap/emacs.js'
 import 'codemirror/addon/hint/show-hint.css'
 import 'codemirror/addon/hint/sql-hint'
 import 'codemirror/addon/hint/show-hint'
+import {imgUrlTrans} from "@/components/canvas/utils/utils";
 
 export default {
   components: { codemirror, draggable },
@@ -327,7 +328,7 @@ export default {
     classBackground() {
       if (this.importTemplateInfo.snapshot) {
         return {
-          background: `url(${this.importTemplateInfo.snapshot}) no-repeat`
+          background: `url(${imgUrlTrans(this.importTemplateInfo.snapshot)}) no-repeat`
         }
       } else {
         return {}
diff --git a/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue b/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue
index cd3859855c..91b7e4f354 100644
--- a/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue
+++ b/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue
@@ -133,6 +133,7 @@ import { chartTransStr2Object } from '@/views/panel/panel'
 import { mapState } from 'vuex'
 import bus from '@/utils/bus'
 import { saveOrUpdateSubject } from '@/api/panel/panel'
+import {imgUrlTrans} from "@/components/canvas/utils/utils";
 
 export default {
   name: 'StyleTemplateItem',
@@ -159,7 +160,7 @@ export default {
           style = {
             width: '100%',
             height: '100%',
-            background: `url(${this.subjectItemDetails.panel.imageUrl}) no-repeat`,
+            background: `url(${imgUrlTrans(this.subjectItemDetails.panel.imageUrl)}) no-repeat`,
             'background-size': '100% 100% !important'
           }
         } else {
diff --git a/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItemback.vue b/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItemback.vue
index 1d19d432b5..e091dfa1e7 100644
--- a/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItemback.vue
+++ b/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItemback.vue
@@ -56,6 +56,7 @@
 
 <script>
 import { chartTransStr2Object } from '@/views/panel/panel'
+import {imgUrlTrans} from "@/components/canvas/utils/utils";
 export default {
   name: 'StyleTemplateItem',
   props: {
@@ -84,7 +85,7 @@ export default {
           style = {
             width: '100%',
             height: '100%',
-            background: `url(${this.subjectItemDetails.panel.imageUrl}) no-repeat`
+            background: `url(${imgUrlTrans(this.subjectItemDetails.panel.imageUrl)}) no-repeat`
           }
         } else {
           style = {
diff --git a/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItem.vue b/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItem.vue
index b526fa7210..8825cb186a 100644
--- a/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItem.vue
+++ b/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItem.vue
@@ -75,6 +75,7 @@ import { mapState } from 'vuex'
 import bus from '@/utils/bus'
 import { saveOrUpdateSubject } from '@/api/panel/panel'
 import { resetViewCacheCallBack } from '@/api/chart/chart'
+import {imgUrlTrans} from "@/components/canvas/utils/utils";
 
 export default {
   name: 'StyleTemplateItem',
@@ -103,7 +104,7 @@ export default {
           style = {
             width: '100%',
             height: '100%',
-            background: `url(${this.subjectItemDetails.panel.imageUrl}) no-repeat`,
+            background: `url(${imgUrlTrans(this.subjectItemDetails.panel.imageUrl)}) no-repeat`,
             'background-size': '100% 100% !important'
           }
         } else {
diff --git a/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItemback.vue b/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItemback.vue
index 1d19d432b5..e091dfa1e7 100644
--- a/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItemback.vue
+++ b/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItemback.vue
@@ -56,6 +56,7 @@
 
 <script>
 import { chartTransStr2Object } from '@/views/panel/panel'
+import {imgUrlTrans} from "@/components/canvas/utils/utils";
 export default {
   name: 'StyleTemplateItem',
   props: {
@@ -84,7 +85,7 @@ export default {
           style = {
             width: '100%',
             height: '100%',
-            background: `url(${this.subjectItemDetails.panel.imageUrl}) no-repeat`
+            background: `url(${imgUrlTrans(this.subjectItemDetails.panel.imageUrl)}) no-repeat`
           }
         } else {
           style = {
diff --git a/frontend/src/views/panel/edit/ComponentWaitItem.vue b/frontend/src/views/panel/edit/ComponentWaitItem.vue
index f6a45a6a65..4c48c259c5 100644
--- a/frontend/src/views/panel/edit/ComponentWaitItem.vue
+++ b/frontend/src/views/panel/edit/ComponentWaitItem.vue
@@ -36,6 +36,7 @@ import MobileCheckBar from '@/components/canvas/components/Editor/MobileCheckBar
 import { getStyle } from '@/components/canvas/utils/style'
 import DeOutWidget from '@/components/dataease/DeOutWidget'
 import { hexColorToRGBA } from '@/views/chart/chart/util'
+import {imgUrlTrans} from "@/components/canvas/utils/utils";
 
 export default {
   name: 'ComponentWaitItem',
@@ -82,7 +83,7 @@ export default {
         }
         if (this.config.commonBackground.enable) {
           if (this.config.commonBackground.backgroundType === 'outerImage' && typeof this.config.commonBackground.outerImage === 'string') {
-            style['background'] = `url(${this.config.commonBackground.outerImage}) no-repeat ${colorRGBA}`
+            style['background'] = `url(${imgUrlTrans(this.config.commonBackground.outerImage)}) no-repeat ${colorRGBA}`
           } else {
             style['background-color'] = colorRGBA
           }
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 60be253b72..f6f0b395fe 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -387,7 +387,7 @@ import FilterGroup from '../filter'
 import SubjectSetting from '../SubjectSetting'
 import bus from '@/utils/bus'
 import Editor from '@/components/canvas/components/Editor/index'
-import { deepCopy, matrixBaseChange } from '@/components/canvas/utils/utils'
+import {deepCopy, imgUrlTrans, matrixBaseChange} from '@/components/canvas/utils/utils'
 import componentList, {
   BASE_MOBILE_STYLE,
   COMMON_BACKGROUND,
@@ -581,7 +581,7 @@ export default {
       if (this.canvasStyleData.openCommonStyle) {
         if (this.canvasStyleData.panel.backgroundType === 'image' && typeof (this.canvasStyleData.panel.imageUrl) === 'string') {
           style = {
-            background: `url(${this.canvasStyleData.panel.imageUrl}) no-repeat`
+            background: `url(${imgUrlTrans(this.canvasStyleData.panel.imageUrl)}) no-repeat`
           }
         } else if (this.canvasStyleData.panel.backgroundType === 'color') {
           style = {
@@ -603,7 +603,7 @@ export default {
       if (this.canvasStyleData.openCommonStyle) {
         if (this.canvasStyleData.panel.backgroundType === 'image' && typeof (this.canvasStyleData.panel.imageUrl) === 'string') {
           style = {
-            background: `url(${this.canvasStyleData.panel.imageUrl}) no-repeat`,
+            background: `url(${imgUrlTrans(this.canvasStyleData.panel.imageUrl)}) no-repeat`,
             ...style
           }
         } else if (this.canvasStyleData.panel.backgroundType === 'color') {
diff --git a/frontend/src/views/panel/index.vue b/frontend/src/views/panel/index.vue
index 0fb51f4bd8..61213ff6c1 100644
--- a/frontend/src/views/panel/index.vue
+++ b/frontend/src/views/panel/index.vue
@@ -34,6 +34,7 @@ export default {
     if (this.componentName === 'PanelEdit') {
       next(false)
       if (confirm(this.$t('panel.edit_leave_tips'))) {
+        bus.$emit('PanelSwitchComponent', { name: 'PanelMain' })
         next()
       }
     } else {
diff --git a/frontend/src/views/panel/list/EditPanel/index.vue b/frontend/src/views/panel/list/EditPanel/index.vue
index f4e8936305..63955172b7 100644
--- a/frontend/src/views/panel/list/EditPanel/index.vue
+++ b/frontend/src/views/panel/list/EditPanel/index.vue
@@ -35,7 +35,7 @@
 import { panelSave, panelUpdate } from '@/api/panel/panel'
 import { showTemplateList } from '@/api/system/template'
 import TemplateAllList from './TemplateAllList'
-import { deepCopy } from '@/components/canvas/utils/utils'
+import {deepCopy, imgUrlTrans} from '@/components/canvas/utils/utils'
 
 export default {
   components: { TemplateAllList },
@@ -68,7 +68,7 @@ export default {
     classBackground() {
       if (this.importTemplateInfo.snapshot) {
         return {
-          background: `url(${this.importTemplateInfo.snapshot}) no-repeat`
+          background: `url(${imgUrlTrans(this.importTemplateInfo.snapshot)}) no-repeat`
         }
       } else {
         return {}
diff --git a/frontend/src/views/panel/template/component/TemplateImport.vue b/frontend/src/views/panel/template/component/TemplateImport.vue
index 7b71a449f9..a4314ffdbd 100644
--- a/frontend/src/views/panel/template/component/TemplateImport.vue
+++ b/frontend/src/views/panel/template/component/TemplateImport.vue
@@ -46,6 +46,7 @@
 import { save, nameCheck } from "@/api/system/template";
 import msgCfm from "@/components/msgCfm/index";
 import { find } from "@/api/system/template";
+import {imgUrlTrans} from "@/components/canvas/utils/utils";
 
 export default {
   mixins: [msgCfm],
@@ -86,7 +87,7 @@ export default {
     classBackground() {
       if (this.importTemplateInfo.snapshot) {
         return {
-          background: `url(${this.importTemplateInfo.snapshot}) no-repeat`,
+          background: `url(${imgUrlTrans(this.importTemplateInfo.snapshot)}) no-repeat`,
         };
       } else {
         return {};
@@ -104,7 +105,7 @@ export default {
     // },
     // validator(rule, value, callback) {
     //   if (this.nameRepeat(value)) {
-        
+
     //     callback(new Error(this.$t('commons.already_exists')));
     //   } else {
     //     callback();
diff --git a/frontend/src/views/panel/templateMarket/component/TemplateMarketItem.vue b/frontend/src/views/panel/templateMarket/component/TemplateMarketItem.vue
index d355433757..c6d34dfd41 100644
--- a/frontend/src/views/panel/templateMarket/component/TemplateMarketItem.vue
+++ b/frontend/src/views/panel/templateMarket/component/TemplateMarketItem.vue
@@ -14,6 +14,8 @@
 </template>
 
 <script>
+import {imgUrlTrans} from "@/components/canvas/utils/utils";
+
 export default {
   name: 'TemplateMarketItem',
   props: {
@@ -39,7 +41,7 @@ export default {
       return {
         width: this.width + 'px',
         height: this.width * 0.58 + 'px',
-        background: `url(${this.thumbnailUrl}) no-repeat`,
+        background: `url(${imgUrlTrans(this.thumbnailUrl)}) no-repeat`,
         'background-size': `100% 100%`
       }
     },
diff --git a/frontend/src/views/panel/templateMarket/component/TemplateMarketPreviewItem.vue b/frontend/src/views/panel/templateMarket/component/TemplateMarketPreviewItem.vue
index 294978e7de..3b0e782d41 100644
--- a/frontend/src/views/panel/templateMarket/component/TemplateMarketPreviewItem.vue
+++ b/frontend/src/views/panel/templateMarket/component/TemplateMarketPreviewItem.vue
@@ -14,6 +14,8 @@
 </template>
 
 <script>
+import {imgUrlTrans} from "@/components/canvas/utils/utils";
+
 export default {
   name: 'TemplateMarketPreviewItem',
   props: {
@@ -39,7 +41,7 @@ export default {
   computed: {
     classBackground() {
       return {
-        background: `url(${this.thumbnailUrl}) no-repeat`,
+        background: `url(${imgUrlTrans(this.thumbnailUrl)}) no-repeat`,
         'background-size': `100% 100%`
       }
     },