diff --git a/packages/opendesign/package.json b/packages/opendesign/package.json
index d935c017203301d2b0512941e810bedd37b3fb74..cda02e86f0637369b049d8ab03dc1a613be1795d 100644
--- a/packages/opendesign/package.json
+++ b/packages/opendesign/package.json
@@ -33,6 +33,7 @@
   "devDependencies": {
     "@opensig/open-scripts": "workspace:^",
     "typescript": "catalog:typescript",
-    "vue-tsc": "catalog:build"
+    "vue-tsc": "catalog:build",
+    "vite": "catalog:build"
   }
 }
diff --git a/packages/opendesign/src/figure/OFigure.vue b/packages/opendesign/src/figure/OFigure.vue
index 1b2551a8f2ec6bcb47f4fce7b0fcb57b29c0563a..a79689ac5b8a08d537d1e0ff26051f4380fe24b3 100644
--- a/packages/opendesign/src/figure/OFigure.vue
+++ b/packages/opendesign/src/figure/OFigure.vue
@@ -93,7 +93,7 @@ const paddingTop = computed(() => {
 
 // 全屏预览图片
 const previewVisible = ref(false);
-const canPreview = computed(() => props.preview || props.lazyPreiew);
+const canPreview = computed(() => props.preview || props.lazyPreview);
 const previewCloseTypes = computed(() => {
   if (!props.previewClose) {
     return isPhonePad.value ? ['image', 'mask', 'button'] : ['mask', 'button'];
@@ -141,51 +141,42 @@ defineExpose({
       'o-figure-hoverable': props.hoverable || !!props.href || props.preview || props.videoPoster,
       'o-figure-previewable': props.preview,
       'o-figure-video-poster': props.videoPoster,
+      'o-figure-bg': props.background,
     }"
     :style="{
       '--figure-prest-color': prestColor,
       '--figure-padding-top': paddingTop,
       '--figure-fit': props.fit,
+      backgroundImage: bgUrl,
     }"
     @click="onFigureClick"
     ref="rootEl"
   >
-    <template v-if="imgSrc">
-      <div
-        v-if="paddingTop || isError"
-        class="o-figure-wrap"
-        :class="{
-          'o-figure-bg': props.background,
-        }"
-        :style="{
-          backgroundImage: bgUrl,
-        }"
-      >
-        <div v-if="isError" class="o-figure-error-wrap">
-          <slot name="error"><IconImageError /></slot>
-        </div>
-        <img
-          v-else-if="!props.background"
-          ref="imgRef"
-          :src="imgSrc"
-          :alt="props.alt"
-          class="o-figure-img-ratio"
-          :loading="props.lazy === true ? 'lazy' : 'eager'"
-          @load="onImgLoaded"
-          @error="onImgError"
-        />
+    <div v-if="paddingTop || isError" class="o-figure-wrap">
+      <div v-if="isError" class="o-figure-error-wrap">
+        <slot name="error"><IconImageError /></slot>
       </div>
       <img
-        v-else-if="!isError"
+        v-else-if="!props.background && imgSrc"
         ref="imgRef"
         :src="imgSrc"
         :alt="props.alt"
-        class="o-figure-img"
+        class="o-figure-img-ratio"
         :loading="props.lazy === true ? 'lazy' : 'eager'"
         @load="onImgLoaded"
         @error="onImgError"
       />
-    </template>
+    </div>
+    <img
+      v-else-if="!isError && imgSrc && !props.background"
+      ref="imgRef"
+      :src="imgSrc"
+      :alt="props.alt"
+      class="o-figure-img"
+      :loading="props.lazy === true ? 'lazy' : 'eager'"
+      @load="onImgLoaded"
+      @error="onImgError"
+    />
     <div class="o-figure-main" v-if="props.videoPoster || $slots.content || $slots.title || $slots.default">
       <slot></slot>
       <div v-if="props.videoPoster" class="o-figure-mask">
diff --git a/packages/opendesign/src/figure/__demo__/FigureBasic.vue b/packages/opendesign/src/figure/__demo__/FigureBasic.vue
index f9ae785289d33b32a12f18147480c2ae93f18639..a90f4be443cb3466dd7969ffc0bbccc21f276037 100644
--- a/packages/opendesign/src/figure/__demo__/FigureBasic.vue
+++ b/packages/opendesign/src/figure/__demo__/FigureBasic.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { onMounted, useTemplateRef } from 'vue';
 import { OFigure } from '../index';
 const img = 'https://www.openeuler.org/img/banners/20230418-odd.png';
 
@@ -12,6 +13,22 @@ const onload = () => {
 const onerror = () => {
   console.log('error');
 };
+let count = 0;
+const testTriggerDouble = () => {
+  if (count++ >= 1) {
+    console.error('失败：修复在设置 background 为 true 且未设置 ratio 属性时，load 或 error 触发两次的问题');
+  } else {
+    console.log('trigger', count);
+  }
+};
+const figureDom = useTemplateRef('background-no-ratio');
+onMounted(() => {
+  if (figureDom.value?.$el.querySelector('img')) {
+    console.error('失败：修复在设置 background 为 true 且未设置 ratio 属性时，background 失效的问题');
+  } else {
+    console.log('成功：修复在设置 background 为 true 且未设置 ratio 属性时，background 失效的问题');
+  }
+});
 </script>
 <template>
   <h4>基本</h4>
@@ -25,6 +42,20 @@ const onerror = () => {
     <OFigure class="img" :src="img" video-poster @click="playVideo" />
   </section>
 
+  <h4>background</h4>
+  <div class="column">
+    <OFigure class="img" :src="img" background :ratio="16 / 9" />
+    <span>修复在设置 background 为 true 且未设置 ratio 属性时，background 失效的问题以及load 或 error 触发两次的问题</span>
+    <OFigure
+      ref="background-no-ratio"
+      class="img"
+      :src="img"
+      background
+      style="height: 200px; width: 200px"
+      @load="testTriggerDouble"
+      @error="testTriggerDouble"
+    />
+  </div>
   <h4>slot</h4>
 
   <section>
@@ -37,6 +68,11 @@ const onerror = () => {
   </section>
 </template>
 <style lang="scss" scoped>
+.column {
+  > * {
+    display: block;
+  }
+}
 .img {
   width: 25%;
   border: 1px solid #ddd;
diff --git a/packages/opendesign/src/figure/__demo__/FigureLazy.vue b/packages/opendesign/src/figure/__demo__/FigureLazy.vue
index b010a8548e9c9c9dc47131aa2f09078259670c35..2a4af93772239a298ab1fc0bffcea79a0b87e1d4 100644
--- a/packages/opendesign/src/figure/__demo__/FigureLazy.vue
+++ b/packages/opendesign/src/figure/__demo__/FigureLazy.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { onMounted, useTemplateRef } from 'vue';
 import { OFigure } from '../index';
 const img1 = 'https://www.openeuler.org/assets/computing-arch_zh_pc.Bn12UMeP.jpg';
 const img2 = 'https://www.openeuler.org/assets/blog-bg1.CWrw5LH1.jpg';
@@ -18,6 +19,15 @@ const onerror = (key: string) => {
 const lazyOption = {
   rootMargin: '400px 0px 400px 0px',
 };
+const figureDom = useTemplateRef('keep-ratio-before-load');
+onMounted(() => {
+  const height = figureDom.value?.$el.getBoundingClientRect().height;
+  if (height && height > 10) {
+    console.log('成功：当 background 为真时 figure 懒加载完成前不能通过 ratio 属性保持宽高比的问题, height: ', height);
+  } else {
+    console.error('失败：当 background 为真时 figure 懒加载完成前不能通过 ratio 属性保持宽高比的问题, height: ', height);
+  }
+});
 </script>
 <template>
   <div style="margin-top: 400vh"></div>
@@ -31,6 +41,8 @@ const lazyOption = {
     <OFigure class="img" :src="img3" colorful @load="() => onload('img3')" lazy @error="() => onerror('img3')" preview />
     <OFigure class="img" :src="img4" :ratio="16 / 9" fit="cover" background colorful @load="() => onload('img4')" lazy @error="() => onerror('img4')" preview />
   </section>
+  <h4>测试当 background 为真时 figure 懒加载完成前不能通过 ratio 属性保持宽高比的问题</h4>
+  <OFigure ref="keep-ratio-before-load" class="img" :src="img4" :ratio="16 / 9" lazy background />
 
   <h4>懒加载 lazy= { rootMargin: '400px 0px 400px 0px' }</h4>
   <section>
@@ -64,4 +76,7 @@ const lazyOption = {
   font-size: 32px;
   cursor: pointer;
 }
+#lazy-preview-ratio-check {
+  border: 5px solid red;
+}
 </style>
diff --git a/packages/opendesign/src/figure/__demo__/FigurePreview.vue b/packages/opendesign/src/figure/__demo__/FigurePreview.vue
index 8202053d08d67e7303086fbb758af443e1d597f3..e3c48894fca1f3d212a37be37f6b2fab71bce8de 100644
--- a/packages/opendesign/src/figure/__demo__/FigurePreview.vue
+++ b/packages/opendesign/src/figure/__demo__/FigurePreview.vue
@@ -68,7 +68,7 @@ const closePreviewManully = () => {
     </div>
     <div>
       <span>使用api调用preivew</span>
-      <OFigure ref="figureRef" class="img" :src="img2" lazy-preiew>
+      <OFigure ref="figureRef" class="img" :src="img2" lazy-preview>
         <OIconSearch class="zoomIn" @click="preivewImg" />
       </OFigure>
     </div>
diff --git a/packages/opendesign/src/figure/types.ts b/packages/opendesign/src/figure/types.ts
index 1aa2bccaf7de51b3fc441ccfebfc0566d585666c..0955b8ebbba2b57577ebaff9a098a0fe1a86aebe 100644
--- a/packages/opendesign/src/figure/types.ts
+++ b/packages/opendesign/src/figure/types.ts
@@ -61,7 +61,7 @@ export const figureProps = {
   /**
    * 支持通过实例接口调用预览
    */
-  lazyPreiew: {
+  lazyPreview: {
     type: Boolean,
   },
   /**
diff --git a/packages/opendesign/src/upload/UploadItem.vue b/packages/opendesign/src/upload/UploadItem.vue
index 45fb64eb637e0fa9561afb6d8d1f0b7bf46850c3..d3c1988e50630a3dc2f71c6eefdddbcf3f74a86b 100644
--- a/packages/opendesign/src/upload/UploadItem.vue
+++ b/packages/opendesign/src/upload/UploadItem.vue
@@ -67,7 +67,7 @@ const onPreview = () => {
       >
         <div class="o-upload-card-item-wrap">
           <div class="o-upload-card-file">
-            <OFigure v-if="props.file.imgUrl" ref="figureRef" lazy-preiew class="o-upload-thumbnail" :src="props.file.imgUrl" />
+            <OFigure v-if="props.file.imgUrl" ref="figureRef" lazy-preview class="o-upload-thumbnail" :src="props.file.imgUrl" />
             <IconFile v-else class="o-upload-icon-file" />
           </div>
           <div
diff --git a/packages/opendesign/src/vite-env.d.ts b/packages/opendesign/src/vite-env.d.ts
index 5e29237ab053b10a2ca392663d776eee21da93bf..11f02fe2a0061d6e6e1f271b21da95423b448b32 100644
--- a/packages/opendesign/src/vite-env.d.ts
+++ b/packages/opendesign/src/vite-env.d.ts
@@ -1,8 +1 @@
 /// <reference types="vite/client" />
-
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue';
-  const component: DefineComponent<{}, {}, any>;
-  export default component;
-}
-declare module '*.scss' {}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7a05f93d5a825c2107370af682c86772d92c14f8..12deaee6897395e89569992c58a5fd2438ae16da 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -279,6 +279,9 @@ importers:
       typescript:
         specifier: catalog:typescript
         version: 5.8.2
+      vite:
+        specifier: catalog:build
+        version: 6.3.0(@types/node@22.13.1)(sass-embedded@1.83.4)(sass@1.84.0)(terser@5.38.1)
       vue-tsc:
         specifier: catalog:build
         version: 2.2.8(typescript@5.8.2)