From 31fb2f10a18a2508d5753967db11edeb7aabcd7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=89=E4=BB=94?= <1414589221@qq.com>
Date: Thu, 11 May 2023 23:01:32 +0800
Subject: [PATCH] fix(image): `fallback-src` prop and lazy loading dosen't work
 (#4485)

* fix(image): `fallback-src` prop and lazy loading dosen't work, close #4480

* Update src/image/demos/zhCN/lazy.demo.vue

---------

Co-authored-by: 07akioni <07akioni2@gmail.com>
---
 CHANGELOG.en-US.md                       |  2 ++
 CHANGELOG.zh-CN.md                       |  1 +
 src/image/demos/enUS/index.demo-entry.md |  3 +-
 src/image/demos/enUS/lazy.demo.vue       | 18 ++++++++++-
 src/image/demos/zhCN/index.demo-entry.md |  2 +-
 src/image/demos/zhCN/lazy.demo.vue       | 19 ++++++++++-
 src/image/src/Image.tsx                  | 41 ++++++++++++------------
 7 files changed, 61 insertions(+), 25 deletions(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 31041bd8935..91f917972b2 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -9,10 +9,12 @@
 - Fix `n-dynamic-input` doesn't return correct `index` in `on-create` callback.
 - Fix `trTR` i18n, closes [#4231](https://github.com/tusen-ai/naive-ui/issues/4231).
 - Fix `n-input`'s show password icon is offset when use both `password` and `disabled`, closes [#4364](https://github.com/tusen-ai/naive-ui/issues/4364).
+- Fix `n-image` set `fallback-src` prop and lazy loading dosen't work, closes[#4480](https://github.com/tusen-ai/naive-ui/issues/4480)
 - Fix `n-upload` warning cause by extraneous non-props attributes were passed to vue component `TransitionGroup` but could not be automatically inherited, closes [#4447](https://github.com/tusen-ai/naive-ui/issues/4447).
 - Fix `n-menu` `show` `default` attribute spelling problem, closes [#4750](https://github.com/tusen-ai/naive-ui/issues/4750).
 - Fix `n-icon-wrapper`'s theme error, closes [#4768](https://github.com/tusen-ai/naive-ui/issues/4768).
 
+
 ### Feats
 
 - `n-dynamic-input` adds `action` slot, closes [#3981](https://github.com/tusen-ai/naive-ui/issues/3981).
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index b6deaf164bb..c2ebf9ef8e6 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -9,6 +9,7 @@
 - 修复 `n-dynamic-input` 在点击添加按钮后 `on-create` 返回的 `index` 不正确
 - 修复 `trTR` 国际化，关闭 [#4231](https://github.com/tusen-ai/naive-ui/issues/4231)
 - 修复 `n-input` 同时使用 `password` 和 `disabled` 时，显示密码图标偏移的问题，关闭 [#4364](https://github.com/tusen-ai/naive-ui/issues/4364)
+- 修复 `n-image` 设置 `fallback-src` 属性和懒加载无效，closes[#4480](https://github.com/tusen-ai/naive-ui/issues/4480)
 - 修复 `n-upload` 内部使用 vue `TransitionGroup` 组件时, 传递了未声明的 prop 且未被自动继承导致警告, 关闭[#4447](https://github.com/tusen-ai/naive-ui/issues/4447)
 - 修复 `n-menu` `show` `default` 属性拼写问题，关闭 [#4750](https://github.com/tusen-ai/naive-ui/issues/4750)
 - 修复 `n-icon-wrapper` 的主题异常，关闭 [#4768](https://github.com/tusen-ai/naive-ui/issues/4768)
diff --git a/src/image/demos/enUS/index.demo-entry.md b/src/image/demos/enUS/index.demo-entry.md
index 84211309105..5319dc85cfd 100644
--- a/src/image/demos/enUS/index.demo-entry.md
+++ b/src/image/demos/enUS/index.demo-entry.md
@@ -25,7 +25,8 @@ previewed-img-props.vue
 | fallback-src | `string` | `undefined` | URL to show when the image fails to load. |  |
 | height | `string \| number` | `undefined` | Image height. |  |
 | img-props | `object` | `undefined` | The props of the img element inside the component. |  |
-| lazy | `boolean` | `false` | Whether to show after it enters viewport configured by `intersection-observer-options` | 2.30.5 |
+| lazy | `boolean` | `false` | Load image after it enters viewport. When used alone, it will be assigned the property value of [HTMLImageElement.loading](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading). Alternatively, it can be used in conjunction with the `intersection-observer-options` configuration to achieve lazy loading. |
+| 2.30.5 |
 | intersection-observer-options | `{ root?: Element \| Document \| string \| null, rootMargin?: string, threshold?: number \| number[]; }` | `undefined` | Intersection observer's config to be applied when `lazy=true`. | 2.30.5 |
 | object-fit | `'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale-down'` | `fill` | Object-fit type of the image in the container. |  |
 | preview-src | `string` | `undefined` | Source of preview image. |  |
diff --git a/src/image/demos/enUS/lazy.demo.vue b/src/image/demos/enUS/lazy.demo.vue
index 19efdfad2ba..9d37021b7db 100644
--- a/src/image/demos/enUS/lazy.demo.vue
+++ b/src/image/demos/enUS/lazy.demo.vue
@@ -1,10 +1,26 @@
 <markdown>
 # Lazy load
 
-You can use `lazy` to let image load after it enters viewport.
+Load the images only after they enter the viewport. There are two ways to use it: one is to use the `lazy` property alone, which will be set to the value of the [HTMLImageElement.loading](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading) property, and the other is to use `lazy` together with the `intersection-observer-options` configuration to implement lazy loading using the [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) API.
 </markdown>
 
 <template>
+  <n-p>use<n-text code>
+    lazy
+  </n-text> along</n-p>
+  <n-image
+    lazy
+    width="100"
+    src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+  />
+  <n-p>
+    use <n-text code>
+      lazy
+    </n-text> with
+    <n-text code>
+      intersection-observer-options
+    </n-text>
+  </n-p>
   <div
     id="image-scroll-container"
     style="
diff --git a/src/image/demos/zhCN/index.demo-entry.md b/src/image/demos/zhCN/index.demo-entry.md
index e05e6a7f378..b4603fa6511 100644
--- a/src/image/demos/zhCN/index.demo-entry.md
+++ b/src/image/demos/zhCN/index.demo-entry.md
@@ -26,7 +26,7 @@ previewed-img-props.vue
 | fallback-src | `string` | `undefined` | 图片加载失败时显示的地址 |  |
 | height | `string \| number` | `undefined` | 图片高度 |  |
 | img-props | `object` | `undefined` | 组件中 img 元素的属性 |  |
-| lazy | `boolean` | `false` | 是否在进入 `intersection-observer-options` 配置的视口之后再开始加载 | 2.30.5 |
+| lazy | `boolean` | `false` | 是否让图片进入视口再加载，单独使用将设置为[HTMLImageElement.loading](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading) 的属性值；也可配合 `intersection-observer-options` 配置实现懒加载 | 2.30.5 |
 | intersection-observer-options | `{ root?: Element \| Document \| string \| null, rootMargin?: string, threshold?: number \| number[]; }` | `undefined` | `lazy=true` 时 intersection observer 观测的配置 | 2.30.5 |
 | object-fit | `'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale-down'` | `'fill'` | 图片在容器内的的适应类型 |  |
 | preview-src | `string` | `undefined` | 预览图片的图片地址 |  |
diff --git a/src/image/demos/zhCN/lazy.demo.vue b/src/image/demos/zhCN/lazy.demo.vue
index 2b88adfaf90..36d4f017cdd 100644
--- a/src/image/demos/zhCN/lazy.demo.vue
+++ b/src/image/demos/zhCN/lazy.demo.vue
@@ -1,10 +1,27 @@
 <markdown>
 # 懒加载
 
-你可以使用 `lazy` 属性让图片进入视口再加载。
+让图片进入视口再加载，两种使用方式：一种是单独使用 `lazy` 属性，则将设置为原生[HTMLImageElement.loading](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLImageElement/loading) 的属性值；
+另一种方式是配合 `intersection-observer-options` 配置，将采用 [IntersectionObserver](https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver) API 实现懒加载。
 </markdown>
 
 <template>
+  <n-p>单独设置 <n-text code>
+    lazy
+  </n-text> 属性</n-p>
+  <n-image
+    lazy
+    width="100"
+    src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+  />
+  <n-p>
+    <n-text code>
+      lazy
+    </n-text> 属性配合
+    <n-text code>
+      intersection-observer-options
+    </n-text>
+  </n-p>
   <div
     id="image-scroll-container"
     style="
diff --git a/src/image/src/Image.tsx b/src/image/src/Image.tsx
index 7388fdafcb9..290fe51a9bd 100644
--- a/src/image/src/Image.tsx
+++ b/src/image/src/Image.tsx
@@ -89,25 +89,23 @@ export default defineComponent({
     })
 
     onMounted(() => {
-      if (isImageSupportNativeLazy) {
-        return
-      }
-      let unobserve: (() => void) | undefined
-      const stopWatchHandle = watchEffect(() => {
-        unobserve?.()
-        unobserve = undefined
-        if (props.lazy) {
+      // Use IntersectionObserver if lazy and intersectionObserverOptions is set
+      if (props.lazy && props.intersectionObserverOptions) {
+        let unobserve: (() => void) | undefined
+        const stopWatchHandle = watchEffect(() => {
+          unobserve?.()
+          unobserve = undefined
           unobserve = observeIntersection(
             imageRef.value,
             props.intersectionObserverOptions,
             shouldStartLoadingRef
           )
-        }
-      })
-      onBeforeUnmount(() => {
-        stopWatchHandle()
-        unobserve?.()
-      })
+        })
+        onBeforeUnmount(() => {
+          stopWatchHandle()
+          unobserve?.()
+        })
+      }
     })
 
     watchEffect(() => {
@@ -154,19 +152,20 @@ export default defineComponent({
     const { mergedClsPrefix, imgProps = {}, loaded, $attrs, lazy } = this
 
     const placeholderNode = this.$slots.placeholder?.()
-    const loadSrc: string = this.src || imgProps.src || ''
+    const loadSrc = this.src || imgProps.src
+
     const imgNode = h('img', {
       ...imgProps,
       ref: 'imageRef',
       width: this.width || imgProps.width,
       height: this.height || imgProps.height,
-      src: isImageSupportNativeLazy
-        ? loadSrc
-        : this.showError
-          ? this.fallbackSrc
-          : this.shouldStartLoading
+      src: this.showError
+        ? this.fallbackSrc
+        : lazy && this.intersectionObserverOptions
+          ? this.shouldStartLoading
             ? loadSrc
-            : undefined,
+            : undefined
+          : loadSrc,
       alt: this.alt || imgProps.alt,
       'aria-label': this.alt || imgProps.alt,
       onClick: this.mergedOnClick,