diff --git a/packages/components/image-viewer/__tests__/image-viewer.test.tsx b/packages/components/image-viewer/__tests__/image-viewer.test.tsx
index b55ef112df..e8d22b9d3f 100644
--- a/packages/components/image-viewer/__tests__/image-viewer.test.tsx
+++ b/packages/components/image-viewer/__tests__/image-viewer.test.tsx
@@ -1,7 +1,7 @@
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, test } from 'vitest'
-import { IMAGE_SUCCESS } from '@element-plus/test-utils/mock'
+import { IMAGE_FAIL, IMAGE_SUCCESS } from '@element-plus/test-utils/mock'
 import ImageViewer from '../src/image-viewer.vue'
 
 async function doubleWait() {
@@ -41,21 +41,22 @@ describe('<image-viewer />', () => {
 
   test('manually switch image', async () => {
     const wrapper = mount(
-      <ImageViewer urlList={[IMAGE_SUCCESS, IMAGE_SUCCESS]} />
+      <ImageViewer urlList={[IMAGE_SUCCESS, IMAGE_FAIL]} initialIndex={0} />
     )
 
     await doubleWait()
     const viewer = wrapper.find('.el-image-viewer__wrapper')
     expect(viewer.exists()).toBe(true)
 
-    const imgList = wrapper.findAll('.el-image-viewer__img')
-    expect(imgList[0].attributes('style')).not.contains('display: none;')
-    expect(imgList[1].attributes('style')).contains('display: none;')
+    const img = wrapper.find('.el-image-viewer__img')
+    expect(img.attributes('src')).toBe(IMAGE_SUCCESS)
 
     wrapper.vm.setActiveItem(1)
     await doubleWait()
-    expect(imgList[0].attributes('style')).contains('display: none;')
-    expect(imgList[1].attributes('style')).not.contains('display: none;')
+    expect(wrapper.find('.el-image-viewer__img').attributes('src')).toBe(
+      IMAGE_FAIL
+    )
+    expect(wrapper.findAll('.el-image-viewer__img').length).toBe(1)
     wrapper.unmount()
   })
 
diff --git a/packages/components/image-viewer/src/image-viewer.vue b/packages/components/image-viewer/src/image-viewer.vue
index 48d017fda6..d71d026fe3 100644
--- a/packages/components/image-viewer/src/image-viewer.vue
+++ b/packages/components/image-viewer/src/image-viewer.vue
@@ -83,19 +83,19 @@
           </div>
           <!-- CANVAS -->
           <div :class="ns.e('canvas')">
-            <img
-              v-for="(url, i) in urlList"
-              v-show="i === activeIndex"
-              :ref="(el) => (imgRefs[i] = el as HTMLImageElement)"
-              :key="url"
-              :src="url"
-              :style="imgStyle"
-              :class="ns.e('img')"
-              :crossorigin="crossorigin"
-              @load="handleImgLoad"
-              @error="handleImgError"
-              @mousedown="handleMouseDown"
-            />
+            <template v-for="(url, i) in urlList" :key="i">
+              <img
+                v-if="i === activeIndex"
+                :ref="(el) => (imgRefs[i] = el as HTMLImageElement)"
+                :src="url"
+                :style="imgStyle"
+                :class="ns.e('img')"
+                :crossorigin="crossorigin"
+                @load="handleImgLoad"
+                @error="handleImgError"
+                @mousedown="handleMouseDown"
+              />
+            </template>
           </div>
           <slot />
         </el-focus-trap>
diff --git a/packages/components/image/__tests__/image.test.tsx b/packages/components/image/__tests__/image.test.tsx
index b1b8c7a75f..8bfa115e63 100644
--- a/packages/components/image/__tests__/image.test.tsx
+++ b/packages/components/image/__tests__/image.test.tsx
@@ -31,64 +31,11 @@ const _mount = (template: string, data: Record<string, any>) =>
   })
 
 describe('Image.vue', () => {
-  mockImageEvent()
-
   test('render test', () => {
     const wrapper = mount(Image)
     expect(wrapper.find('.el-image').exists()).toBe(true)
   })
 
-  test('image load success test', async () => {
-    const alt = 'this ia alt'
-    const wrapper = mount({
-      setup() {
-        const props: ElImageProps = {
-          alt,
-          src: IMAGE_SUCCESS,
-        }
-        return () => <Image {...props} />
-      },
-    })
-    expect(wrapper.find('.el-image__placeholder').exists()).toBe(true)
-    await doubleWait()
-    expect(wrapper.find('.el-image__inner').exists()).toBe(true)
-    expect(wrapper.find('img').exists()).toBe(true)
-    await nextTick()
-    expect(wrapper.find('.el-image__placeholder').exists()).toBe(false)
-    expect(wrapper.find('.el-image__error').exists()).toBe(false)
-  })
-
-  test('image load error test', async () => {
-    const wrapper = mount(Image, {
-      props: {
-        src: IMAGE_FAIL,
-      },
-    })
-    await doubleWait()
-    wrapper.emitted('error') && expect(wrapper.emitted('error')).toBeDefined()
-    expect(wrapper.find('.el-image__inner').exists()).toBe(false)
-    expect(wrapper.find('img').exists()).toBe(false)
-    expect(wrapper.find('.el-image__error').exists()).toBe(true)
-  })
-
-  test('image load sequence success test', async () => {
-    const wrapper = mount(Image, {
-      props: {
-        src: IMAGE_FAIL,
-      },
-    })
-    wrapper.setProps({
-      src: IMAGE_SUCCESS,
-    })
-    expect(wrapper.find('.el-image__placeholder').exists()).toBe(true)
-    await doubleWait()
-    expect(wrapper.emitted('error')).toBeUndefined()
-    expect(wrapper.find('.el-image__inner').exists()).toBe(true)
-    expect(wrapper.find('img').exists()).toBe(true)
-    expect(wrapper.find('.el-image__placeholder').exists()).toBe(false)
-    expect(wrapper.find('.el-image__error').exists()).toBe(false)
-  })
-
   test('imageStyle fit test', async () => {
     const fits = ['fill', 'contain', 'cover', 'none', 'scale-down'] as const
     for (const fit of fits) {
@@ -114,15 +61,17 @@ describe('Image.vue', () => {
   test('preview initial index test', async () => {
     const props: ElImageProps = {
       src: IMAGE_SUCCESS,
-      previewSrcList: Array.from<string>({ length: 3 }).fill(IMAGE_FAIL),
+      previewSrcList: Array.from<string>({ length: 3 }).map(
+        (_, idx) => IMAGE_FAIL + idx
+      ),
       initialIndex: 1,
     }
     const wrapper = mount(() => <Image {...props} />)
     await doubleWait()
     await wrapper.find('.el-image__inner').trigger('click')
-    expect(
-      wrapper.findAll('.el-image-viewer__img')[1].attributes('style')
-    ).not.toContain('display: none')
+    expect(wrapper.find('.el-image-viewer__img').attributes('src')).toBe(
+      IMAGE_FAIL + 1
+    )
   })
 
   test('native loading attributes', async () => {
@@ -166,21 +115,11 @@ describe('Image.vue', () => {
     expect(result).toBeTruthy()
   })
 
-  test('emit load event', async () => {
-    const handleLoad = vi.fn()
-    const props: ElImageProps = {
-      src: IMAGE_SUCCESS,
-      onLoad: handleLoad,
-    }
-    const wrapper = mount(() => <Image {...props} />)
-    await doubleWait()
-    expect(wrapper.find('.el-image__inner').exists()).toBe(true)
-    expect(handleLoad).toBeCalled()
-  })
-
   test('manually open preview', async () => {
     const url = IMAGE_SUCCESS
-    const srcList = Array.from<string>({ length: 3 }).fill(IMAGE_FAIL)
+    const srcList = Array.from<string>({ length: 3 }).map(
+      (_, idx) => IMAGE_FAIL + idx
+    )
     const wrapper = _mount(
       `
       <el-image
@@ -199,9 +138,9 @@ describe('Image.vue', () => {
     await doubleWait()
     wrapper.vm.$refs.imageRef.showPreview()
     await doubleWait()
-    expect(
-      wrapper.findAll('.el-image-viewer__img')[1].attributes('style')
-    ).not.toContain('display: none')
+    expect(wrapper.find('.el-image-viewer__img').attributes('src')).toBe(
+      IMAGE_FAIL + 1
+    )
   })
   //@todo lazy image test
 
@@ -261,4 +200,71 @@ describe('Image.vue', () => {
     await doubleWait()
     expect(wrapper.find('.el-image-viewer__progress').exists()).toBe(true)
   })
+
+  describe('load', () => {
+    mockImageEvent()
+
+    test('image load success test', async () => {
+      const alt = 'this ia alt'
+      const wrapper = mount({
+        setup() {
+          const props: ElImageProps = {
+            alt,
+            src: IMAGE_SUCCESS,
+          }
+          return () => <Image {...props} />
+        },
+      })
+      expect(wrapper.find('.el-image__placeholder').exists()).toBe(true)
+      await doubleWait()
+      expect(wrapper.find('.el-image__inner').exists()).toBe(true)
+      expect(wrapper.find('img').exists()).toBe(true)
+      await nextTick()
+      expect(wrapper.find('.el-image__placeholder').exists()).toBe(false)
+      expect(wrapper.find('.el-image__error').exists()).toBe(false)
+    })
+
+    test('image load error test', async () => {
+      const wrapper = mount(Image, {
+        props: {
+          src: IMAGE_FAIL,
+        },
+      })
+      await doubleWait()
+      wrapper.emitted('error') && expect(wrapper.emitted('error')).toBeDefined()
+      expect(wrapper.find('.el-image__inner').exists()).toBe(false)
+      expect(wrapper.find('img').exists()).toBe(false)
+      expect(wrapper.find('.el-image__error').exists()).toBe(true)
+    })
+
+    test('image load sequence success test', async () => {
+      const wrapper = mount(Image, {
+        props: {
+          src: IMAGE_FAIL,
+        },
+      })
+      wrapper.setProps({
+        src: IMAGE_SUCCESS,
+      })
+      expect(wrapper.find('.el-image__placeholder').exists()).toBe(true)
+      await doubleWait()
+      expect(wrapper.emitted('error')).toBeUndefined()
+      expect(wrapper.find('.el-image__inner').exists()).toBe(true)
+      expect(wrapper.find('img').exists()).toBe(true)
+      expect(wrapper.find('.el-image__placeholder').exists()).toBe(false)
+      expect(wrapper.find('.el-image__error').exists()).toBe(false)
+    })
+
+    test('emit load event', async () => {
+      const handleLoad = vi.fn()
+      const props: ElImageProps = {
+        src: IMAGE_SUCCESS,
+        onLoad: handleLoad,
+      }
+      const wrapper = mount(() => <Image {...props} />)
+      await doubleWait()
+      expect(wrapper.find('.el-image__inner').exists()).toBe(true)
+      expect(handleLoad).toBeCalled()
+    })
+  })
 })