refactor(avatar): disabled native lazy currently

src/_utils/env/is-native-lazy-load.ts

@@ -1,2 +1,3 @@
-export const isImageSupportNativeLazy =
-  typeof document !== 'undefined' && 'loading' in document.createElement('img')
+export const isImageSupportNativeLazy = false
+// Keep it to false currently, we will provide a prop to make it configuable
+// typeof document !== 'undefined' && 'loading' in document.createElement('img')

src/avatar/demos/enUS/lazy.demo.vue

@@ -9,8 +9,10 @@ You can use `lazy` to let image load after it enters viewport.
     id="image-scroll-container"
     style="overflow: auto; height: 100px; gap: 8px"
   >
-    <div v-for="i of range" :key="i">
+    <n-space vertical>
       <n-avatar
+        v-for="i of range"
+        :key="i"
         size="small"
         :src="
           'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg?t=' + i
@@ -20,7 +22,7 @@ You can use `lazy` to let image load after it enters viewport.
           root: '#image-scroll-container'
         }"
       />
-    </div>
+    </n-space>
   </div>
 </template>
 

src/avatar/demos/zhCN/lazy.demo.vue

@@ -9,8 +9,10 @@
     id="image-scroll-container"
     style="overflow: auto; height: 100px; gap: 8px"
   >
-    <div v-for="i of range" :key="i">
+    <n-space vertical>
       <n-avatar
+        v-for="i of range"
+        :key="i"
         size="small"
         :src="
           'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg?t=' + i
@@ -20,7 +22,7 @@
           root: '#image-scroll-container'
         }"
       />
-    </div>
+    </n-space>
   </div>
 </template>
 

src/avatar/src/Avatar.tsx

@@ -12,21 +12,21 @@ import {
   onBeforeUnmount
 } from 'vue'
 import { VResizeObserver } from 'vueuc'
-import { avatarGroupInjectionKey } from './context'
-import type { Size, ObjectFit } from './interface'
-import { tagInjectionKey } from '../../tag/src/Tag'
-import { useConfig, useTheme, useThemeClass } from '../../_mixins'
-import type { ThemeProps } from '../../_mixins'
-import { avatarLight } from '../styles'
-import type { AvatarTheme } from '../styles'
-import { createKey, color2Class, resolveWrappedSlot } from '../../_utils'
-import type { ExtractPublicPropTypes } from '../../_utils'
-import style from './styles/index.cssr'
+import { isImageSupportNativeLazy } from '../../_utils/env/is-native-lazy-load'
 import {
   IntersectionObserverOptions,
   observeIntersection
 } from '../../image/src/utils'
-import { isImageSupportNativeLazy } from '../../_utils/env/is-native-lazy-load'
+import { tagInjectionKey } from '../../tag/src/Tag'
+import { useConfig, useTheme, useThemeClass } from '../../_mixins'
+import type { ThemeProps } from '../../_mixins'
+import { createKey, color2Class, resolveWrappedSlot } from '../../_utils'
+import type { ExtractPublicPropTypes } from '../../_utils'
+import { avatarLight } from '../styles'
+import type { AvatarTheme } from '../styles'
+import { avatarGroupInjectionKey } from './context'
+import type { Size, ObjectFit } from './interface'
+import style from './styles/index.cssr'
 
 export const avatarProps = {
   ...(useTheme.props as ThemeProps<AvatarTheme>),