fix: 处理组件图片路径会报错的问题

src/views/chart/ContentCharts/components/ChartsItemBox/index.vue

@@ -22,7 +22,7 @@
           </n-text>
         </div>
         <div class="list-center go-flex-center go-transition">
-          <img class="list-img" v-lazy="item.image" alt="图表图片" />
+          <charts-item-image class="list-img" :chartConfig="item"></charts-item-image>
         </div>
         <div class="list-bottom">
           <n-text class="list-bottom-text" depth="3">
@@ -37,6 +37,7 @@
 <script setup lang="ts">
 import { PropType, watch, ref, Ref, computed, nextTick } from 'vue'
 import { MacOsControlBtn } from '@/components/Tips/MacOsControlBtn/index'
+import { ChartsItemImage } from '../ChartsItemImage'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { ChartModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'

src/views/chart/ContentCharts/components/ChartsItemImage/index.ts

@@ -0,0 +1,3 @@
+import ChartsItemImage from './index.vue'
+
+export { ChartsItemImage }

src/views/chart/ContentCharts/components/ChartsItemImage/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <img class="list-img" v-lazy="imageInfo" alt="图表图片" />
+</template>
+
+<script setup lang="ts">
+import { ref, PropType } from 'vue'
+import { fetchImages } from '@/packages'
+import { ConfigType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<ConfigType>,
+    required: true
+  },
+})
+
+const imageInfo = ref('')
+
+// 获取图片
+const fetchImageUrl = async () => {
+  imageInfo.value = await fetchImages(props.chartConfig)
+}
+fetchImageUrl()
+</script>

src/views/chart/ContentLayers/components/LayersListItem/index.vue

@@ -5,7 +5,7 @@
         class="list-img"
         object-fit="contain"
         preview-disabled
-        :src="image"
+        :src="imageInfo"
         :fallback-src="requireErrorImg()"
       ></n-image>
       <n-ellipsis style="margin-right: auto">
@@ -20,16 +20,18 @@
 </template>
 
 <script setup lang="ts">
-import { computed, PropType } from 'vue'
+import { computed, PropType, ref, watch } from 'vue'
 import { requireErrorImg } from '@/utils'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { LayerModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+import { fetchImages } from '@/packages'
+import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { LayersStatus } from '../LayersStatus/index'
 
 const props = defineProps({
   componentData: {
-    type: Object,
+    type: Object as PropType<CreateComponentType | CreateComponentGroupType>,
     required: true
   },
   isGroup: {
@@ -45,9 +47,13 @@ const props = defineProps({
 // 全局颜色
 const designStore = useDesignStore()
 const chartEditStore = useChartEditStore()
+const imageInfo = ref('')
 
-// eslint-disable-next-line vue/no-setup-props-destructure
-const { image } = props.componentData.chartConfig
+// 获取图片
+const fetchImageUrl = async () => {
+  imageInfo.value = await fetchImages(props.componentData.chartConfig)
+}
+fetchImageUrl()
 
 // 颜色
 const themeColor = computed(() => {