修复image组件图片懒加载失效 (#3036)

* 修复image组件图片懒加载失效

* fix(image): 修复image组件图片懒加载失效

* test: update snapshots

---------

Co-authored-by: hxh <1047739781>
Co-authored-by: anlyyao <anly_yaw@163.com>

Author: huxinhai

src/image-viewer/__test__/__snapshots__/index.test.js.snap

@@ -50,8 +50,7 @@ exports[`image-viewer :base 1`] = `
   <wx-image
     ariaHidden="{{true}}"
     ariaLabel=""
-    class="class t-class t-image t-image--shape-square"
-    hidden="{{true}}"
+    class="class t-class t-image t-image--shape-square t-image--lazy"
     id="image"
     lazyLoad="{{true}}"
     mode="aspectFit"
@@ -115,8 +114,7 @@ exports[`image-viewer :base 2`] = `
   <wx-image
     ariaHidden="{{true}}"
     ariaLabel=""
-    class="class t-class t-image t-image--shape-square"
-    hidden="{{true}}"
+    class="class t-class t-image t-image--shape-square t-image--lazy"
     id="image"
     lazyLoad="{{true}}"
     mode="aspectFit"
@@ -180,8 +178,7 @@ exports[`image-viewer :base 3`] = `
   <wx-image
     ariaHidden="{{true}}"
     ariaLabel=""
-    class="class t-class t-image t-image--shape-square"
-    hidden="{{true}}"
+    class="class t-class t-image t-image--shape-square t-image--lazy"
     id="image"
     lazyLoad="{{true}}"
     mode="aspectFit"

src/image/__test__/__snapshots__/index.test.js.snap

@@ -46,8 +46,7 @@ exports[`image :base 1`] = `
     <wx-image
       ariaHidden="{{true}}"
       ariaLabel=""
-      class="class t-class t-image t-image--shape-square"
-      hidden="{{true}}"
+      class="class t-class t-image t-image--shape-square t-image--lazy"
       id="image"
       lazyLoad="{{false}}"
       mode="scaleToFill"
@@ -71,8 +70,7 @@ exports[`image :success 1`] = `
     <wx-image
       ariaHidden="{{false}}"
       ariaLabel=""
-      class="class t-class t-image t-image--shape-square"
-      hidden="{{false}}"
+      class="class t-class t-image t-image--shape-square "
       id="image"
       lazyLoad="{{false}}"
       mode="heightFix"

src/image/image.less

@@ -5,6 +5,10 @@
 @image-loading-color: var(--td-image-loading-color, @text-color-placeholder);
 @image-round-radius: var(--td-image-round-radius, @radius-default);
 
+:host {
+  position: relative;
+}
+
 .@{prefix}-image {
   color: @image-color;
   vertical-align: top;
@@ -27,6 +31,12 @@
     height: 100%;
   }
 
+  &--lazy {
+    position: absolute;
+    top: 0;
+    z-index: -1;
+  }
+
   &--shape {
     &-circle {
       border-radius: 50%;

src/image/image.wxml

@@ -37,8 +37,8 @@
 <!-- 图片 -->
 <image
   id="{{tId||'image'}}"
-  hidden="{{isLoading || isFailed}}"
-  class="class {{prefix}}-class {{classPrefix}} {{classPrefix}}--shape-{{shape}}"
+  wx:if="{{ !isFailed }}"
+  class="class {{prefix}}-class {{classPrefix}} {{classPrefix}}--shape-{{shape}} {{isLoading ? classPrefix + '--lazy' : ''}}"
   src="{{src}}"
   style="{{_._style([innerStyle, style, customStyle])}}"
   mode="{{mode}}"