diff --git a/packages/docs/ReleaesNote.opendesign.md b/packages/docs/ReleaesNote.opendesign.md
index fd74307672a13402e62d73a9e377a5073cc4da9c..fc5d063f6d6405687198575b7969349f216626b9 100644
--- a/packages/docs/ReleaesNote.opendesign.md
+++ b/packages/docs/ReleaesNote.opendesign.md
@@ -20,6 +20,7 @@
 2. [button] 新增 `--btn-gap-prefix` 及 `--btn-gap-suffix` 变量以单独控制前缀及后缀图标外边距
 3. [scss-mixin] respond-to新增断点
 4. [menu] 菜单增加small尺寸
+5. [figure] 新增CSS变量--figure-error-bk控制图片加载失败时背景色
 
 - fix
 
@@ -31,6 +32,12 @@
 6. [rate] 完善ORate组件icon插槽status变量类型签名
 7. [select] 优化select组件provide的select函数
 8. [vScrollbar] 优化类型签名
+9. [figure] 修复组件lazyPreview参数单词拼写错误
+10. [figure] 修复当 background 为真时图片懒加载完成前不能通过 ratio 属性保持宽高比的问题
+11. [figure] 修复组件在设置 background 为 true 且未设置 ratio 属性时
+    - background 不显示
+    - load 或 error 触发两次
+    - 组件的高度应该通过默认插槽中的内容撑开
 
 # 1.0.1
 
diff --git a/packages/opendesign/package.json b/packages/opendesign/package.json
index da46d068f554fb63e138b6cd472ef80c2e8b04b2..7660970f63e47b9cd64ef8dd1c18986d0d4dced4 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..5ac45bb57993e058d2d7f33c9814c37b2e8a502c 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,43 @@ 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,
+      'o-figure-no-ratio': !props.ratio,
     }"
     :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="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..9198c200565403de9ae7c23b369c9b0a4db816ca 100644
--- a/packages/opendesign/src/figure/__demo__/FigureBasic.vue
+++ b/packages/opendesign/src/figure/__demo__/FigureBasic.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
+import { onMounted, useTemplateRef } from 'vue';
 import { OFigure } from '../index';
+import { OButton } from '../../button';
+import '../../button/style';
 const img = 'https://www.openeuler.org/img/banners/20230418-odd.png';
 
 const playVideo = () => {
@@ -12,6 +15,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 +44,31 @@ 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"
+    />
+    <span>修复在设置 background 为 true 且未设置 ratio 属性时，组件的高度依靠默认插槽中的内容撑开</span>
+    <OFigure :src="img" background fit="100% auto" class="background-no-ratio">
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem impedit aut non, quo, debitis vel nulla ullam veritatis fugit itaque nihil vero quia, esse
+      saepe ipsam maiores iste. Voluptatem, at!
+      <OButton color="primary" variant="solid" @click="console.log('click1')">click1</OButton>
+    </OFigure>
+    <OFigure src="/abc.jpg" background fit="100% auto" class="background-no-ratio">
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem impedit aut non, quo, debitis vel nulla ullam veritatis fugit itaque nihil vero quia, esse
+      saepe ipsam maiores iste. Voluptatem, at!
+      <OButton color="primary" variant="solid" @click="console.log('click2')">click2</OButton>
+    </OFigure>
+  </div>
   <h4>slot</h4>
 
   <section>
@@ -37,6 +81,22 @@ const onerror = () => {
   </section>
 </template>
 <style lang="scss" scoped>
+.background-no-ratio {
+  --figure-position: left top;
+  --figure-error-bk: lightblue;
+
+  color: red;
+  width: 300px;
+}
+
+.column {
+  display: grid;
+  grid-column: 1fr;
+  gap: 16px;
+  > * {
+    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/style/style.scss b/packages/opendesign/src/figure/style/style.scss
index eb36a011c4f0095a0948bbbea2a61e10be6dcfd3..a5c337ae36d6802046430c9cfd45a4c8cadcb00d 100644
--- a/packages/opendesign/src/figure/style/style.scss
+++ b/packages/opendesign/src/figure/style/style.scss
@@ -27,7 +27,7 @@
     border-radius: var(--figure-radius);
   }
   &.is-error {
-    background-color: var(--o-color-control4);
+    background-color: var(--figure-error-bk);
   }
 }
 
@@ -67,6 +67,18 @@
   background-size: var(--figure-fit);
   background-position: var(--figure-position);
   background-repeat: no-repeat;
+
+  &.o-figure-no-ratio {
+    // background 模式下且未设置 ratio 时，组件高度由 o-figure-main 中的内容撑开
+    // o-figure-wrap 中的 IconImageError 作为背景图
+    .o-figure-wrap {
+      position: absolute;
+      inset: 0;
+    }
+    .o-figure-main {
+      position: relative;
+    }
+  }
 }
 .o-figure-img-ratio {
   position: absolute;
diff --git a/packages/opendesign/src/figure/style/var.scss b/packages/opendesign/src/figure/style/var.scss
index 3ba00e204ef7d50d4eb72305a8c11c6b6f8f451e..8a1558ef438132f8375ad7dd2a53a96dff711f1f 100644
--- a/packages/opendesign/src/figure/style/var.scss
+++ b/packages/opendesign/src/figure/style/var.scss
@@ -1,8 +1,9 @@
 .o-figure {
-  --figure-padding-top: 50%;
+  --figure-padding-top: 0px;
   --figure-fit: cover;
   --figure-position: center;
   --figure-radius: 0;
+  --figure-error-bk: var(--o-color-control4);
   --figure-error-color: var(--o-color-control4);
   --figure-error-size: var(--o-icon_size_control-l);
   --figure-play-icon-size: 64px;
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 af36df349a654c7c39061abbf656a6e5b5b48f8c..11f02fe2a0061d6e6e1f271b21da95423b448b32 100644
--- a/packages/opendesign/src/vite-env.d.ts
+++ b/packages/opendesign/src/vite-env.d.ts
@@ -1,7 +1 @@
 /// <reference types="vite/client" />
-
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue';
-  const component: DefineComponent<{}, {}, any>;
-  export default component;
-}
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)