diff --git a/packages/components/image-viewer/_example-ts/base.vue b/packages/components/image-viewer/_example-ts/base.vue
index ec342fece2..1539c98aa8 100644
--- a/packages/components/image-viewer/_example-ts/base.vue
+++ b/packages/components/image-viewer/_example-ts/base.vue
@@ -1,91 +1,12 @@
 <template>
-  <div>
-    <div class="tdesign-demo-image-viewer__base">
-      <t-image-viewer :images="[img]">
-        <template #trigger="{ open }">
-          <div class="tdesign-demo-image-viewer__ui-image">
-            <img alt="test" :src="img" class="tdesign-demo-image-viewer__ui-image--img" />
-            <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
-              <span><BrowseIcon size="1.4em" /> 预览</span>
-            </div>
-          </div>
-        </template>
-      </t-image-viewer>
-    </div>
+  <div class="tdesign-demo-image-viewer__base">
+    <t-image-viewer :images="[img]"></t-image-viewer>
   </div>
 </template>
 <script lang="ts" setup>
-import { BrowseIcon } from 'tdesign-icons-vue-next';
 const img = 'https://tdesign.gtimg.com/demo/demo-image-1.png';
 </script>
 <style scoped>
-.tdesign-demo-image-viewer__ui-image {
-  width: 100%;
-  height: 100%;
-  display: inline-flex;
-  position: relative;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--td-radius-small);
-  overflow: hidden;
-}
-
-.tdesign-demo-image-viewer__ui-image--hover {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  left: 0;
-  top: 0;
-  opacity: 0;
-  background-color: rgba(0, 0, 0, 0.6);
-  color: var(--td-text-color-anti);
-  line-height: 22px;
-  transition: 0.2s;
-}
-
-.tdesign-demo-image-viewer__ui-image:hover .tdesign-demo-image-viewer__ui-image--hover {
-  opacity: 1;
-  cursor: pointer;
-}
-
-.tdesign-demo-image-viewer__ui-image--img {
-  width: auto;
-  height: auto;
-  max-width: 100%;
-  max-height: 100%;
-  cursor: pointer;
-  position: absolute;
-}
-
-.tdesign-demo-image-viewer__ui-image--footer {
-  padding: 0 16px;
-  height: 56px;
-  width: 100%;
-  line-height: 56px;
-  font-size: 16px;
-  position: absolute;
-  bottom: 0;
-  color: var(--td-text-color-anti);
-  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
-  display: flex;
-  box-sizing: border-box;
-}
-
-.tdesign-demo-image-viewer__ui-image--title {
-  flex: 1;
-}
-
-.tdesign-demo-popup__reference {
-  margin-left: 16px;
-}
-
-.tdesign-demo-image-viewer__ui-image--icons .tdesign-demo-icon {
-  cursor: pointer;
-}
-
 .tdesign-demo-image-viewer__base {
   width: 160px;
   height: 160px;
diff --git a/packages/components/image-viewer/_example-ts/modeless.vue b/packages/components/image-viewer/_example-ts/modeless.vue
index e9a7b2efd3..8be31adbb4 100644
--- a/packages/components/image-viewer/_example-ts/modeless.vue
+++ b/packages/components/image-viewer/_example-ts/modeless.vue
@@ -1,94 +1,14 @@
 <template>
   <div class="tdesign-demo-image-viewer__base">
-    <t-image-viewer v-model:visible="visible" draggable mode="modeless" :images="[img]">
-      <template #trigger>
-        <div class="tdesign-demo-image-viewer__ui-image">
-          <img alt="test" :src="img" class="tdesign-demo-image-viewer__ui-image--img" />
-          <div class="tdesign-demo-image-viewer__ui-image--hover" @click="onOpen">
-            <span><BrowseIcon size="1.4em" /> 预览</span>
-          </div>
-        </div>
-      </template>
-    </t-image-viewer>
+    <t-image-viewer draggable mode="modeless" :images="[img]"> </t-image-viewer>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { BrowseIcon } from 'tdesign-icons-vue-next';
 const img = 'https://tdesign.gtimg.com/demo/demo-image-1.png';
-const visible = ref(false);
-const onOpen = () => (visible.value = true);
 </script>
 
 <style scoped>
-.tdesign-demo-image-viewer__ui-image {
-  width: 100%;
-  height: 100%;
-  display: inline-flex;
-  position: relative;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--td-radius-small);
-  overflow: hidden;
-}
-
-.tdesign-demo-image-viewer__ui-image--hover {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  left: 0;
-  top: 0;
-  opacity: 0;
-  background-color: rgba(0, 0, 0, 0.6);
-  color: var(--td-text-color-anti);
-  line-height: 22px;
-  transition: 0.2s;
-}
-
-.tdesign-demo-image-viewer__ui-image:hover .tdesign-demo-image-viewer__ui-image--hover {
-  opacity: 1;
-  cursor: pointer;
-}
-
-.tdesign-demo-image-viewer__ui-image--img {
-  width: auto;
-  height: auto;
-  max-width: 100%;
-  max-height: 100%;
-  cursor: pointer;
-  position: absolute;
-}
-
-.tdesign-demo-image-viewer__ui-image--footer {
-  padding: 0 16px;
-  height: 56px;
-  width: 100%;
-  line-height: 56px;
-  font-size: 16px;
-  position: absolute;
-  bottom: 0;
-  color: var(--td-text-color-anti);
-  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
-  display: flex;
-  box-sizing: border-box;
-}
-
-.tdesign-demo-image-viewer__ui-image--title {
-  flex: 1;
-}
-
-.tdesign-demo-popup__reference {
-  margin-left: 16px;
-}
-
-.tdesign-demo-image-viewer__ui-image--icons .tdesign-demo-icon {
-  cursor: pointer;
-}
-
 .tdesign-demo-image-viewer__base {
   width: 160px;
   height: 160px;
diff --git a/packages/components/image-viewer/_example/base.vue b/packages/components/image-viewer/_example/base.vue
index 51b6717119..eb1d07001f 100644
--- a/packages/components/image-viewer/_example/base.vue
+++ b/packages/components/image-viewer/_example/base.vue
@@ -1,92 +1,12 @@
 <template>
-  <div>
-    <div class="tdesign-demo-image-viewer__base">
-      <t-image-viewer :images="[img]">
-        <template #trigger="{ open }">
-          <div class="tdesign-demo-image-viewer__ui-image">
-            <img alt="test" :src="img" class="tdesign-demo-image-viewer__ui-image--img" />
-            <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
-              <span><BrowseIcon size="1.4em" /> 预览</span>
-            </div>
-          </div>
-        </template>
-      </t-image-viewer>
-    </div>
+  <div class="tdesign-demo-image-viewer__base">
+    <t-image-viewer :images="[img]"></t-image-viewer>
   </div>
 </template>
 <script setup>
-import { BrowseIcon } from 'tdesign-icons-vue-next';
-
 const img = 'https://tdesign.gtimg.com/demo/demo-image-1.png';
 </script>
 <style scoped>
-.tdesign-demo-image-viewer__ui-image {
-  width: 100%;
-  height: 100%;
-  display: inline-flex;
-  position: relative;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--td-radius-small);
-  overflow: hidden;
-}
-
-.tdesign-demo-image-viewer__ui-image--hover {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  left: 0;
-  top: 0;
-  opacity: 0;
-  background-color: rgba(0, 0, 0, 0.6);
-  color: var(--td-text-color-anti);
-  line-height: 22px;
-  transition: 0.2s;
-}
-
-.tdesign-demo-image-viewer__ui-image:hover .tdesign-demo-image-viewer__ui-image--hover {
-  opacity: 1;
-  cursor: pointer;
-}
-
-.tdesign-demo-image-viewer__ui-image--img {
-  width: auto;
-  height: auto;
-  max-width: 100%;
-  max-height: 100%;
-  cursor: pointer;
-  position: absolute;
-}
-
-.tdesign-demo-image-viewer__ui-image--footer {
-  padding: 0 16px;
-  height: 56px;
-  width: 100%;
-  line-height: 56px;
-  font-size: 16px;
-  position: absolute;
-  bottom: 0;
-  color: var(--td-text-color-anti);
-  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
-  display: flex;
-  box-sizing: border-box;
-}
-
-.tdesign-demo-image-viewer__ui-image--title {
-  flex: 1;
-}
-
-.tdesign-demo-popup__reference {
-  margin-left: 16px;
-}
-
-.tdesign-demo-image-viewer__ui-image--icons .tdesign-demo-icon {
-  cursor: pointer;
-}
-
 .tdesign-demo-image-viewer__base {
   width: 160px;
   height: 160px;
diff --git a/packages/components/image-viewer/_example/modeless.vue b/packages/components/image-viewer/_example/modeless.vue
index 85736484d6..76e5282e24 100644
--- a/packages/components/image-viewer/_example/modeless.vue
+++ b/packages/components/image-viewer/_example/modeless.vue
@@ -1,96 +1,14 @@
 <template>
   <div class="tdesign-demo-image-viewer__base">
-    <t-image-viewer v-model:visible="visible" draggable mode="modeless" :images="[img]">
-      <template #trigger>
-        <div class="tdesign-demo-image-viewer__ui-image">
-          <img alt="test" :src="img" class="tdesign-demo-image-viewer__ui-image--img" />
-          <div class="tdesign-demo-image-viewer__ui-image--hover" @click="onOpen">
-            <span><BrowseIcon size="1.4em" /> 预览</span>
-          </div>
-        </div>
-      </template>
-    </t-image-viewer>
+    <t-image-viewer draggable mode="modeless" :images="[img]"> </t-image-viewer>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import { BrowseIcon } from 'tdesign-icons-vue-next';
-
 const img = 'https://tdesign.gtimg.com/demo/demo-image-1.png';
-
-const visible = ref(false);
-const onOpen = () => (visible.value = true);
 </script>
 
 <style scoped>
-.tdesign-demo-image-viewer__ui-image {
-  width: 100%;
-  height: 100%;
-  display: inline-flex;
-  position: relative;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--td-radius-small);
-  overflow: hidden;
-}
-
-.tdesign-demo-image-viewer__ui-image--hover {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  left: 0;
-  top: 0;
-  opacity: 0;
-  background-color: rgba(0, 0, 0, 0.6);
-  color: var(--td-text-color-anti);
-  line-height: 22px;
-  transition: 0.2s;
-}
-
-.tdesign-demo-image-viewer__ui-image:hover .tdesign-demo-image-viewer__ui-image--hover {
-  opacity: 1;
-  cursor: pointer;
-}
-
-.tdesign-demo-image-viewer__ui-image--img {
-  width: auto;
-  height: auto;
-  max-width: 100%;
-  max-height: 100%;
-  cursor: pointer;
-  position: absolute;
-}
-
-.tdesign-demo-image-viewer__ui-image--footer {
-  padding: 0 16px;
-  height: 56px;
-  width: 100%;
-  line-height: 56px;
-  font-size: 16px;
-  position: absolute;
-  bottom: 0;
-  color: var(--td-text-color-anti);
-  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
-  display: flex;
-  box-sizing: border-box;
-}
-
-.tdesign-demo-image-viewer__ui-image--title {
-  flex: 1;
-}
-
-.tdesign-demo-popup__reference {
-  margin-left: 16px;
-}
-
-.tdesign-demo-image-viewer__ui-image--icons .tdesign-demo-icon {
-  cursor: pointer;
-}
-
 .tdesign-demo-image-viewer__base {
   width: 160px;
   height: 160px;
diff --git a/packages/components/image-viewer/image-viewer.md b/packages/components/image-viewer/image-viewer.md
index 21175d748a..70adb2eb19 100644
--- a/packages/components/image-viewer/image-viewer.md
+++ b/packages/components/image-viewer/image-viewer.md
@@ -20,7 +20,7 @@ mode | String | modal | 模态预览（modal）和非模态预览（modeless)。
 navigationArrow | Boolean / Slot / Function | true | 切换预览图片的左图标，可自定义。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
 showOverlay | Boolean | undefined | 是否显示遮罩层。`mode=modal` 时，默认显示；`mode=modeless` 时，默认不显示 | N
 title | String / Slot / Function | - | 预览标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
-trigger | String / Slot / Function | - | 触发图片预览的元素，可能是一个预览按钮，可能是一张缩略图，完全自定义。TS 类型：`TNode \| TNode<{ open: (index?: number) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
+trigger | String / Slot / Function | - | 触发图片预览的元素，可能是一个预览按钮，可能是一张缩略图，完全自定义，默认为预览图片的缩略图。TS 类型：`TNode \| TNode<{ open: (index?: number) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
 viewerScale | Object | - | 限制预览器缩放的最小宽度和最小高度，仅 `mode=modeless` 时有效。TS 类型：`ImageViewerScale` `interface ImageViewerScale { minWidth: number; minHeight: number }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/image-viewer/type.ts) | N
 visible | Boolean | false | 隐藏/显示预览。支持语法糖 `v-model` 或 `v-model:visible` | N
 defaultVisible | Boolean | false | 隐藏/显示预览。非受控属性 | N
diff --git a/packages/components/image-viewer/image-viewer.tsx b/packages/components/image-viewer/image-viewer.tsx
index 29b8ce7816..4a1c948ce8 100644
--- a/packages/components/image-viewer/image-viewer.tsx
+++ b/packages/components/image-viewer/image-viewer.tsx
@@ -1,4 +1,4 @@
-import { ChevronDownIcon, ChevronLeftIcon, CloseIcon } from 'tdesign-icons-vue-next';
+import { BrowseIcon, ChevronDownIcon, ChevronLeftIcon, CloseIcon } from 'tdesign-icons-vue-next';
 import { Teleport, Transition, computed, defineComponent, nextTick, ref, toRefs, watch } from 'vue';
 
 import {
@@ -94,7 +94,7 @@ export default defineComponent({
       props.onDownload ? props.onDownload(url) : downloadFile(url);
     };
 
-    const openHandler = (index: number) => {
+    const openHandler = (index?: number) => {
       if (isNumber(index)) {
         onImgClick(index);
       }
@@ -231,11 +231,33 @@ export default defineComponent({
       );
     };
 
+    const renderDefaultTrigger = () => {
+      const firstImage = images.value[0] || '';
+      const imageSrc = typeof firstImage === 'string' ? firstImage : firstImage.mainImage || firstImage.thumbnail;
+      return (
+        <div class={`${COMPONENT_NAME.value}__trigger`}>
+          <Image
+            src={imageSrc}
+            alt="preview"
+            fit="contain"
+            class={`${COMPONENT_NAME.value}__trigger-img`}
+            onClick={() => openHandler()}
+          />
+          <div class={`${COMPONENT_NAME.value}__trigger--hover`} onClick={() => openHandler()}>
+            <span>
+              <BrowseIcon size="1.4em" class={`${COMPONENT_NAME.value}__trigger-icon`} />
+              预览
+            </span>
+          </div>
+        </div>
+      );
+    };
+
     return () => {
       if (props.mode === 'modeless') {
         return (
           <>
-            {renderTNodeJSX('trigger', { params: { open: openHandler } })}
+            {renderTNodeJSX('trigger', { params: { open: openHandler } }) || renderDefaultTrigger()}
             <TImageViewerModal
               zIndex={zIndexValue.value}
               visible={visibleValue.value}
@@ -263,7 +285,7 @@ export default defineComponent({
 
       return (
         <>
-          {renderTNodeJSX('trigger', { params: { open: openHandler } })}
+          {renderTNodeJSX('trigger', { params: { open: openHandler } }) || renderDefaultTrigger()}
           <Teleport disabled={!props.attach || !teleportElement.value} to={teleportElement.value}>
             <Transition>
               {(visibleValue.value || !animationEnd.value) && (
diff --git a/packages/components/image-viewer/props.ts b/packages/components/image-viewer/props.ts
index 1171399808..8684a9d092 100644
--- a/packages/components/image-viewer/props.ts
+++ b/packages/components/image-viewer/props.ts
@@ -89,7 +89,7 @@ export default {
   title: {
     type: [String, Function] as PropType<TdImageViewerProps['title']>,
   },
-  /** 触发图片预览的元素，可能是一个预览按钮，可能是一张缩略图，完全自定义 */
+  /** 触发图片预览的元素，可能是一个预览按钮，可能是一张缩略图，完全自定义, 默认为预览图片的缩略图 */
   trigger: {
     type: [String, Function] as PropType<TdImageViewerProps['trigger']>,
   },
diff --git a/packages/components/image-viewer/type.ts b/packages/components/image-viewer/type.ts
index 7e91856a09..66087e9fe6 100644
--- a/packages/components/image-viewer/type.ts
+++ b/packages/components/image-viewer/type.ts
@@ -80,7 +80,7 @@ export interface TdImageViewerProps {
    */
   title?: string | TNode;
   /**
-   * 触发图片预览的元素，可能是一个预览按钮，可能是一张缩略图，完全自定义
+   * 触发图片预览的元素，可能是一个预览按钮，可能是一张缩略图，完全自定义，默认为预览图片的缩略图
    */
   trigger?: TNode | TNode<{ open: (index?: number) => void }>;
   /**
diff --git a/packages/components/upload/__tests__/__snapshots__/upload.test.tsx.snap b/packages/components/upload/__tests__/__snapshots__/upload.test.tsx.snap
index a7c8305d78..4c165749de 100644
--- a/packages/components/upload/__tests__/__snapshots__/upload.test.tsx.snap
+++ b/packages/components/upload/__tests__/__snapshots__/upload.test.tsx.snap
@@ -1268,7 +1268,137 @@ exports[`Upload Component > props.theme: theme=file-flow works fine 1`] = `
     </table>
     <!---->
     
-    <!---->
+    <div
+      class="t-image-viewer__trigger"
+    >
+      <div
+        class="t-image__wrapper t-image__wrapper--shape-square t-image-viewer__trigger-img"
+        fallback=""
+        referrerpolicy="strict-origin-when-cross-origin"
+      >
+        <!---->
+        <!---->
+        <!---->
+        <img
+          alt="preview"
+          class="t-image t-image--fit-contain t-image--position-center"
+          referrerpolicy="strict-origin-when-cross-origin"
+          src=""
+        />
+        <div
+          class="t-image__loading"
+        >
+          <div
+            class="t-space t-space-align-center t-space-vertical"
+            style="gap: 8px;"
+          >
+            
+            
+            <div
+              class="t-space-item"
+            >
+              <svg
+                class="t-icon t-icon-image"
+                fill="none"
+                height="1em"
+                style="fill: none; font-size: 24px;"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <g
+                  id="image"
+                >
+                  <path
+                    d="M3 21H20L9 10L3 16V21Z"
+                    fill="transparent"
+                    id="fill1"
+                  />
+                  <circle
+                    cx="15.75"
+                    cy="8.25"
+                    fill="transparent"
+                    id="fill2"
+                    r="2"
+                  />
+                  <path
+                    d="M3 16V3H21V21H20M3 16V21H20M3 16L9 10L20 21"
+                    id="stroke1"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  />
+                  <circle
+                    cx="15.75"
+                    cy="8.25"
+                    id="stroke2"
+                    r="2"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  />
+                </g>
+              </svg>
+            </div>
+            <!---->
+            
+            
+            <div
+              class="t-space-item"
+            >
+              图片加载中
+            </div>
+            <!---->
+            
+            
+          </div>
+        </div>
+        <!---->
+        <!---->
+      </div>
+      <div
+        class="t-image-viewer__trigger--hover"
+      >
+        <span>
+          <svg
+            class="t-icon t-icon-browse t-image-viewer__trigger-icon"
+            fill="none"
+            height="1em"
+            style="fill: none; font-size: 1.4em;"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <g
+              clipPath="url(#clip0_543_7945)"
+              id="browse"
+            >
+              <path
+                d="M11.9997 4C6.86881 4 2.52275 7.36017 1.04199 12C2.52275 16.6398 6.86881 20 11.9997 20C17.1306 20 21.4766 16.6398 22.9574 12C21.4766 7.36017 17.1306 4 11.9997 4Z"
+                fill="transparent"
+                id="fill1"
+              />
+              <path
+                d="M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z"
+                fill="transparent"
+                id="fill2"
+              />
+              <path
+                d="M11.9997 4C6.86881 4 2.52275 7.36017 1.04199 12C2.52275 16.6398 6.86881 20 11.9997 20C17.1306 20 21.4766 16.6398 22.9574 12C21.4766 7.36017 17.1306 4 11.9997 4Z"
+                id="stroke1"
+                stroke="currentColor"
+                stroke-linecap="square"
+                stroke-width="2"
+              />
+              <path
+                d="M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z"
+                id="stroke2"
+                stroke="currentColor"
+                stroke-linecap="square"
+                stroke-width="2"
+              />
+            </g>
+          </svg>
+          预览
+        </span>
+      </div>
+    </div>
     <!--teleport start-->
     <transition-stub
       appear="false"
@@ -2052,7 +2182,137 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
     <!---->
     <!---->
     
-    <!---->
+    <div
+      class="t-image-viewer__trigger"
+    >
+      <div
+        class="t-image__wrapper t-image__wrapper--shape-square t-image-viewer__trigger-img"
+        fallback=""
+        referrerpolicy="strict-origin-when-cross-origin"
+      >
+        <!---->
+        <!---->
+        <!---->
+        <img
+          alt="preview"
+          class="t-image t-image--fit-contain t-image--position-center"
+          referrerpolicy="strict-origin-when-cross-origin"
+          src=""
+        />
+        <div
+          class="t-image__loading"
+        >
+          <div
+            class="t-space t-space-align-center t-space-vertical"
+            style="gap: 8px;"
+          >
+            
+            
+            <div
+              class="t-space-item"
+            >
+              <svg
+                class="t-icon t-icon-image"
+                fill="none"
+                height="1em"
+                style="fill: none; font-size: 24px;"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <g
+                  id="image"
+                >
+                  <path
+                    d="M3 21H20L9 10L3 16V21Z"
+                    fill="transparent"
+                    id="fill1"
+                  />
+                  <circle
+                    cx="15.75"
+                    cy="8.25"
+                    fill="transparent"
+                    id="fill2"
+                    r="2"
+                  />
+                  <path
+                    d="M3 16V3H21V21H20M3 16V21H20M3 16L9 10L20 21"
+                    id="stroke1"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  />
+                  <circle
+                    cx="15.75"
+                    cy="8.25"
+                    id="stroke2"
+                    r="2"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  />
+                </g>
+              </svg>
+            </div>
+            <!---->
+            
+            
+            <div
+              class="t-space-item"
+            >
+              图片加载中
+            </div>
+            <!---->
+            
+            
+          </div>
+        </div>
+        <!---->
+        <!---->
+      </div>
+      <div
+        class="t-image-viewer__trigger--hover"
+      >
+        <span>
+          <svg
+            class="t-icon t-icon-browse t-image-viewer__trigger-icon"
+            fill="none"
+            height="1em"
+            style="fill: none; font-size: 1.4em;"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <g
+              clipPath="url(#clip0_543_7945)"
+              id="browse"
+            >
+              <path
+                d="M11.9997 4C6.86881 4 2.52275 7.36017 1.04199 12C2.52275 16.6398 6.86881 20 11.9997 20C17.1306 20 21.4766 16.6398 22.9574 12C21.4766 7.36017 17.1306 4 11.9997 4Z"
+                fill="transparent"
+                id="fill1"
+              />
+              <path
+                d="M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z"
+                fill="transparent"
+                id="fill2"
+              />
+              <path
+                d="M11.9997 4C6.86881 4 2.52275 7.36017 1.04199 12C2.52275 16.6398 6.86881 20 11.9997 20C17.1306 20 21.4766 16.6398 22.9574 12C21.4766 7.36017 17.1306 4 11.9997 4Z"
+                id="stroke1"
+                stroke="currentColor"
+                stroke-linecap="square"
+                stroke-width="2"
+              />
+              <path
+                d="M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z"
+                id="stroke2"
+                stroke="currentColor"
+                stroke-linecap="square"
+                stroke-width="2"
+              />
+            </g>
+          </svg>
+          预览
+        </span>
+      </div>
+    </div>
     <!--teleport start-->
     <transition-stub
       appear="false"
diff --git a/packages/tdesign-vue-next/.changelog/pr-5935.md b/packages/tdesign-vue-next/.changelog/pr-5935.md
new file mode 100644
index 0000000000..c9b242e1ae
--- /dev/null
+++ b/packages/tdesign-vue-next/.changelog/pr-5935.md
@@ -0,0 +1,6 @@
+---
+pr_number: 5935
+contributor: EthanShen10086
+---
+
+- feat(ImageViewer): 新增默认 trigger ，默认为当前使用的图片作为默认 trigger，降低组件的使用难度，具体参考相关示例改动 @EthanShen10086 ([#5935](https://github.com/Tencent/tdesign-vue-next/pull/5935))