fix(Avatar): fix image load error fallback and reload when image source changes

packages/components/avatar-group/type.ts

@@ -4,7 +4,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { ShapeEnum } from '../common/common';
+import type { ShapeEnum } from '../common/common';
 
 export interface TdAvatarGroupProps {
   /**

packages/components/avatar/README.en-US.md

@@ -9,13 +9,13 @@ name | type | default | description | required
 style | Object | - | CSS(Cascading Style Sheets) | N
 custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
 alt | String | - | show it when url is not valid | N
-badge-props | Object | - | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/avatar/type.ts) | N
+badge-props | Object | - | Typescript: `BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/avatar/type.ts) | N
 bordered | Boolean | false | \- | N
 hide-on-load-failed | Boolean | false | hide image when loading image failed | N
 icon | String / Object | - | \- | N
 image | String | - | images url | N
-image-props | Object | - | Typescript：`ImageProps`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/avatar/type.ts) | N
-shape | String | - | shape。options: circle/round。Typescript：`ShapeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts) | N
+image-props | Object | - | Typescript: `ImageProps`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/avatar/type.ts) | N
+shape | String | - | shape。options: circle/round。Typescript: `ShapeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts) | N
 size | String | - | size | N
 
 ### Avatar Events
@@ -47,10 +47,10 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 style | Object | - | CSS(Cascading Style Sheets) | N
 custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
-cascading | String | 'left-up' | multiple images cascading。options: left-up/right-up。Typescript：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/avatar-group/type.ts) | N
+cascading | String | 'left-up' | multiple images cascading。options: left-up/right-up。Typescript: `CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/avatar-group/type.ts) | N
 collapse-avatar | String | - | \- | N
 max | Number | - | \- | N
-shape | String | - | shape。options: circle/round。Typescript：`ShapeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts) | N
+shape | String | - | shape。options: circle/round。Typescript: `ShapeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts) | N
 size | String | - | size | N
 
 ### AvatarGroup Events

packages/components/avatar/__test__/index.test.js

@@ -67,7 +67,18 @@ describe('Avatar & Avatar Groups', () => {
       expect($text.dom.textContent).toBe('A');
     });
 
-    it(':hideOnLoadFailed', async () => {
+    it(':hideOnLoadFailed=false 图片加载失败后保留图片', async () => {
+      const comp = simulate.render(id);
+      comp.attach(document.createElement('parent-wrapper'));
+
+      const $image = comp.querySelector('.error-avatar-wrapper >>> #image');
+      $image.dispatchEvent('error');
+      await simulate.sleep(20);
+      // 默认 hideOnLoadFailed=false：图片组件仍保留，由 t-image 内部展示错误占位
+      expect(comp.querySelector('.error-avatar-wrapper >>> .t-image')).toBeTruthy();
+    });
+
+    it(':hideOnLoadFailed=true 图片加载失败后移除图片回退字符', async () => {
       const comp = simulate.render(id);
       comp.attach(document.createElement('parent-wrapper'));
 
@@ -80,7 +91,9 @@ describe('Avatar & Avatar Groups', () => {
       });
       $image.dispatchEvent('error');
       await simulate.sleep(20);
-      expect($wrapper.dom.style.display).toBe('none');
+      // 仅移除图片组件（回退展示字符内容），头像 wrapper 仍保留
+      expect($wrapper.dom.style.display).toBe('');
+      expect(comp.querySelector('.error-avatar-wrapper >>> .t-image')).toBeFalsy();
     });
   });
 

packages/components/avatar/avatar.less

@@ -72,6 +72,14 @@
   &__image {
     width: 100%;
     height: 100%;
+
+    &-alt {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: @spacer;
+      overflow: hidden;
+    }
   }
 
   &--circle {

packages/components/avatar/avatar.ts

@@ -26,6 +26,7 @@ export default class Avatar extends SuperComponent {
     prefix,
     classPrefix: name,
     isShow: true,
+    isImgExist: true,
     zIndex: 0,
     windowWidth: systemInfo.windowWidth,
   };
@@ -52,6 +53,15 @@ export default class Avatar extends SuperComponent {
         ...obj,
       });
     },
+
+    image(image) {
+      // 图片地址变化时重置加载失败标记，避免切换后无法重新渲染
+      if (image) {
+        this.setData({
+          isImgExist: true,
+        });
+      }
+    },
   };
 
   methods = {
@@ -62,11 +72,9 @@ export default class Avatar extends SuperComponent {
     },
 
     onLoadError(e: WechatMiniprogram.CustomEvent) {
-      if (this.properties.hideOnLoadFailed) {
-        this.setData({
-          isShow: false,
-        });
-      }
+      this.setData({
+        isImgExist: !this.properties.hideOnLoadFailed,
+      });
       this.triggerEvent('error', e.detail);
     },
   };

packages/components/avatar/avatar.wxml

@@ -28,17 +28,17 @@
       aria-hidden="{{ ariaHidden }}"
     >
       <t-image
-        wx:if="{{image}}"
+        wx:if="{{image && isImgExist}}"
         t-class="{{prefix}}-image {{classPrefix}}__image"
-        t-class-load="{{prefix}}-class-alt"
+        t-class-load="{{classPrefix}}__image-alt {{prefix}}-class-alt"
         style="{{imageProps && imageProps.style || ''}}"
         src="{{image}}"
         mode="{{imageProps && imageProps.mode || 'aspectFill'}}"
         lazy="{{imageProps && imageProps.lazy || false}}"
         loading="{{imageProps && imageProps.loading || 'default'}}"
         shape="{{imageProps && imageProps.shape || 'round'}}"
         webp="{{imageProps && imageProps.webp || false}}"
-        error="{{alt || 'default'}}"
+        error="{{imageProps && imageProps.error || alt || 'default'}}"
         bind:error="onLoadError"
       />
       <template

packages/components/avatar/type.ts

@@ -6,7 +6,7 @@
 
 import { BadgeProps } from '../badge/index';
 import { ImageProps } from '../image/index';
-import { ShapeEnum } from '../common/common';
+import type { ShapeEnum } from '../common/common';
 
 export interface TdAvatarProps {
   /**

packages/tdesign-miniprogram/.changelog/pr-4635.md

@@ -0,0 +1,6 @@
+---
+pr_number: 4635
+contributor: anlyyao
+---
+
+- fix(Avatar): 修复图片加载失败后回退展示及切换图片地址无法重新加载的问题 @anlyyao ([#4635](https://github.com/Tencent/tdesign-miniprogram/pull/4635))