fix(components): [avatar] watch srcSet changes to reset hasLoadError (#23324)

packages/components/avatar/__tests__/avatar.test.tsx

@@ -77,24 +77,28 @@ describe('Avatar.vue', () => {
     }
   })
 
-  test('src changed', async () => {
-    const wrapper = mount(
-      <Avatar
-        v-slots={{
-          default: () => 'fallback',
-        }}
-      />
-    )
+  describe('image source changed', () => {
+    test.each([
+      { name: 'src', prop: 'src' },
+      { name: 'srcSet', prop: 'srcSet' },
+    ])('$name', async ({ prop }) => {
+      const wrapper = mount(
+        <Avatar
+          v-slots={{
+            default: () => 'fallback',
+          }}
+        />
+      )
 
-    expect(wrapper.vm.hasLoadError).toBe(false)
-    await wrapper.setProps({ src: IMAGE_FAIL })
-    // wait error event trigger
-    await stableLoad(() => !wrapper.vm.hasLoadError)
-    expect(wrapper.vm.hasLoadError).toBe(true)
-    await wrapper.setProps({ src: IMAGE_SUCCESS })
-    await flushPromises()
-    expect(wrapper.vm.hasLoadError).toBe(false)
-    expect(wrapper.find('img').exists()).toBe(true)
+      expect(wrapper.vm.hasLoadError).toBe(false)
+      await wrapper.setProps({ [prop]: IMAGE_FAIL })
+      await stableLoad(() => !wrapper.vm.hasLoadError)
+      expect(wrapper.vm.hasLoadError).toBe(true)
+      await wrapper.setProps({ [prop]: IMAGE_SUCCESS })
+      await flushPromises()
+      expect(wrapper.vm.hasLoadError).toBe(false)
+      expect(wrapper.find('img').exists()).toBe(true)
+    })
   })
 })
 

packages/components/avatar/src/avatar.vue

@@ -66,7 +66,7 @@ const fitStyle = computed<CSSProperties>(() => ({
 
 // need reset hasLoadError to false if src changed
 watch(
-  () => props.src,
+  () => [props.src, props.srcSet],
   () => (hasLoadError.value = false)
 )