From 00ed0b56a68dfdfc334f36d403248d0abb75f93b Mon Sep 17 00:00:00 2001
From: wangdaodao <hi@wangdaodao.com>
Date: Wed, 4 Sep 2024 17:15:26 +0800
Subject: [PATCH 1/2] feat: Image add infinite props

---
 examples/docs/en-US/image.md        |  1 +
 examples/docs/es/image.md           |  1 +
 examples/docs/fr-FR/image.md        |  1 +
 examples/docs/zh-CN/image.md        |  1 +
 packages/image/src/image-viewer.vue | 28 ++++++++++++++++------------
 packages/image/src/main.vue         |  2 +-
 packages/theme-chalk/src/image.scss |  8 ++++++++
 types/image.d.ts                    |  3 +++
 8 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/examples/docs/en-US/image.md b/examples/docs/en-US/image.md
index 63751120054..c7a579da0a5 100644
--- a/examples/docs/en-US/image.md
+++ b/examples/docs/en-US/image.md
@@ -148,6 +148,7 @@ Besides the native features of img, support lazy load, custom placeholder and lo
 | preview-src-list | allow big image preview | Array | — | - |
 | z-index | set image preview z-index | Number | — | 2000 |
 | initial-index | set image preview array index | Number | — | - |
+| infinite | whether the viewer preview is infinite. | boolean | — | true |
 
 ### Events
 | Event Name | Description | Parameters |
diff --git a/examples/docs/es/image.md b/examples/docs/es/image.md
index 18e6b534e7a..8174f7f38aa 100644
--- a/examples/docs/es/image.md
+++ b/examples/docs/es/image.md
@@ -150,6 +150,7 @@ Además de las características nativas de img, soporte de carga perezosa, marca
 | preview-src-list | permitir una vista previa grande de la imagen | Array | — | - |
 | z-index | establecer el z-index de la vista previa de la imagen | Number | — | 2000 |
 | initial-index | set image preview array index | Number | — | - |
+| infinite | Si la vista previa del espectador es ilimitada. | boolean | — | true |
 
 ### Eventos
 | Nombre del evento | Descripción | Parámetros |
diff --git a/examples/docs/fr-FR/image.md b/examples/docs/fr-FR/image.md
index 9f37ad91f99..e3cfac50301 100644
--- a/examples/docs/fr-FR/image.md
+++ b/examples/docs/fr-FR/image.md
@@ -149,6 +149,7 @@ En plus des propriétés natives de img, ce composant supporte le lazy loading,
 | preview-src-list | allow big image preview | Array | — | - |
 | z-index | set image preview z-index | Number | — | 2000 |
 | initial-index | set image preview array index | Number | — | - |
+| infinite | Voir si l'aperçu du spectateur est illimité. | boolean | — | true |
 
 ### Évènements
 | Nom | Description | Paramètres |
diff --git a/examples/docs/zh-CN/image.md b/examples/docs/zh-CN/image.md
index d01d3eeded4..9b8463fface 100644
--- a/examples/docs/zh-CN/image.md
+++ b/examples/docs/zh-CN/image.md
@@ -148,6 +148,7 @@
 | preview-src-list | 开启图片预览功能 | Array | — | - |
 | z-index | 设置图片预览的 z-index | Number | — | 2000 |
 | initial-index | 图片预览初始图片index | Number | — | - |
+| infinite | 是否可以无限循环预览 | boolean | — | true |
 
 ### Events
 | 事件名称      | 说明    | 回调参数      |
diff --git a/packages/image/src/image-viewer.vue b/packages/image/src/image-viewer.vue
index 63c85dade2a..120dca8fe83 100644
--- a/packages/image/src/image-viewer.vue
+++ b/packages/image/src/image-viewer.vue
@@ -35,17 +35,18 @@
       </div>
       <!-- CANVAS -->
       <div class="el-image-viewer__canvas">
-        <img
-          v-for="(url, i) in urlList"
-          v-if="i === index"
-          ref="img"
-          class="el-image-viewer__img"
-          :key="url"
-          :src="currentImg"
-          :style="imgStyle"
-          @load="handleImgLoad"
-          @error="handleImgError"
-          @mousedown="handleMouseDown">
+        <template v-for="(url, i) in urlList">
+          <img
+            v-if="i === index"
+            ref="img"
+            class="el-image-viewer__img"
+            :key="url"
+            :src="currentImg"
+            :style="imgStyle"
+            @load="handleImgLoad"
+            @error="handleImgError"
+            @mousedown="handleMouseDown" />
+        </template>
       </div>
     </div>
   </transition>
@@ -100,6 +101,10 @@ export default {
     maskClosable: {
       type: Boolean,
       default: true
+    },
+    infinite: {
+      type: Boolean,
+      default: true
     }
   },
 
@@ -107,7 +112,6 @@ export default {
     return {
       index: this.initialIndex,
       isShow: false,
-      infinite: true,
       loading: false,
       mode: Mode.CONTAIN,
       transform: {
diff --git a/packages/image/src/main.vue b/packages/image/src/main.vue
index c6786b8484c..95d92dcc59b 100644
--- a/packages/image/src/main.vue
+++ b/packages/image/src/main.vue
@@ -16,7 +16,7 @@
       :style="imageStyle"
       :class="{ 'el-image__inner--center': alignCenter, 'el-image__preview': preview }">
     <template v-if="preview">
-      <image-viewer :z-index="zIndex" :initial-index="imageIndex" v-if="showViewer" :on-close="closeViewer" :url-list="previewSrcList"/>
+      <image-viewer :z-index="zIndex" v-bind="$attrs" :initial-index="imageIndex" v-if="showViewer" :on-close="closeViewer" :url-list="previewSrcList"/>
     </template>
   </div>
 </template>
diff --git a/packages/theme-chalk/src/image.scss b/packages/theme-chalk/src/image.scss
index 39358e6b289..b9bd324ca57 100644
--- a/packages/theme-chalk/src/image.scss
+++ b/packages/theme-chalk/src/image.scss
@@ -122,6 +122,10 @@
     background-color: #606266;
     border-color: #fff;
     left: 40px;
+    @include when(disabled) {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
   }
 
   @include e(next){
@@ -135,6 +139,10 @@
     border-color: #fff;
     right: 40px;
     text-indent: 2px;
+    @include when(disabled) {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
   }
 
   @include e(mask) {
diff --git a/types/image.d.ts b/types/image.d.ts
index 8640e4bd7c8..d6f474dc4e3 100644
--- a/types/image.d.ts
+++ b/types/image.d.ts
@@ -24,6 +24,9 @@ export declare class ElImage extends ElementUIComponent {
   /** Whether to use lazy load */
   lazy: boolean
 
+  /** Whether to use infinite */
+  infinite: boolean
+
   /** Scroll container that to add scroll listener when using lazy load */
   scrollContainer: string | HTMLElement
 

From ad177c9561c06acf92bcf4d8e7c8c8329670f25d Mon Sep 17 00:00:00 2001
From: wangdaodao <hi@wangdaodao.com>
Date: Fri, 6 Sep 2024 15:06:04 +0800
Subject: [PATCH 2/2] fix: Translation after image loading error.

---
 packages/image/src/image-viewer.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/image/src/image-viewer.vue b/packages/image/src/image-viewer.vue
index 120dca8fe83..e29351424f5 100644
--- a/packages/image/src/image-viewer.vue
+++ b/packages/image/src/image-viewer.vue
@@ -53,6 +53,7 @@
 </template>
 
 <script>
+import Locale from 'element-ui/src/mixins/locale';
 import { on, off } from 'element-ui/src/utils/dom';
 import { rafThrottle, isFirefox } from 'element-ui/src/utils/util';
 import { PopupManager } from 'element-ui/src/utils/popup';
@@ -72,7 +73,7 @@ const mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel';
 
 export default {
   name: 'elImageViewer',
-
+  mixins: [Locale],
   props: {
     urlList: {
       type: Array,
@@ -234,7 +235,7 @@ export default {
     },
     handleImgError(e) {
       this.loading = false;
-      e.target.alt = '加载失败';
+      e.target.alt = this.t('el.image.error');
     },
     handleMouseDown(e) {
       if (this.loading || e.button !== 0) return;