-
-
Notifications
You must be signed in to change notification settings - Fork 51.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: Avatar falling back to children on image error #24944
Conversation
@@ -100,6 +100,8 @@ describe('Avatar Render', () => { | |||
|
|||
expect(wrapper).toMatchSnapshot(); | |||
expect(wrapper.find('.ant-avatar-string').length).toBe(1); | |||
// children should show, when image load error without onError return false | |||
expect(wrapper.find('.ant-avatar-string').prop('style')).not.toHaveProperty('opacity', 0); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这个测试 不应该是判断 渲染的 children 是 Fallback
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
之前的流程在图片加载失败后,设置isImgExist = flase
,导致直接走到了这里,并且由于 children之前没有加载过,所以 avatarChildrenRef.current
为空,最终染了opacity 为 0 的子节点(Fallback
)
ant-design/components/avatar/index.tsx
Lines 139 to 185 in ec87ea4
} else { | |
const childrenNode = avatarChildrenRef.current; | |
if (childrenNode || scale !== 1) { | |
const transformString = `scale(${scale}) translateX(-50%)`; | |
const childrenStyle: React.CSSProperties = { | |
msTransform: transformString, | |
WebkitTransform: transformString, | |
transform: transformString, | |
}; | |
const sizeChildrenStyle: React.CSSProperties = | |
typeof size === 'number' | |
? { | |
lineHeight: `${size}px`, | |
} | |
: {}; | |
children = ( | |
<span | |
className={`${prefixCls}-string`} | |
ref={(node: HTMLElement) => { | |
avatarChildrenRef.current = node; | |
}} | |
style={{ ...sizeChildrenStyle, ...childrenStyle }} | |
> | |
{children} | |
</span> | |
); | |
} else { | |
const childrenStyle: React.CSSProperties = {}; | |
if (!mounted) { | |
childrenStyle.opacity = 0; | |
} | |
children = ( | |
<span | |
className={`${prefixCls}-string`} | |
style={{ opacity: 0 }} | |
ref={(node: HTMLElement) => { | |
avatarChildrenRef.current = node; | |
}} | |
> | |
{children} | |
</span> | |
); | |
} | |
} | |
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit b0e5faf:
|
[中文版模板 / Chinese template]
🤔 This is a ...
🔗 Related issue link
#24897
💡 Background and solution
当image加载失败时,如果有children,则fall back到children
📝 Changelog
☑️ Self Check before Merge
View rendered components/avatar/index.en-US.md
View rendered components/avatar/index.zh-CN.md