Skip to content
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

Merged
merged 1 commit into from
Jun 12, 2020

Conversation

sosohime
Copy link
Contributor

@sosohime sosohime commented Jun 12, 2020

[中文版模板 / Chinese template]

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / documentation update
  • Demo update
  • Component style update
  • TypeScript definition update
  • Bundle size optimization
  • Perfermance optimization
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Other (about what?)

🔗 Related issue link

#24897

💡 Background and solution

当image加载失败时,如果有children,则fall back到children

📝 Changelog

Language Changelog
🇺🇸 English Fix Avatar fallback to children when loading image with error.
🇨🇳 Chinese 修复 Avatar 图片加载错误的显示问题。

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

View rendered components/avatar/index.en-US.md
View rendered components/avatar/index.zh-CN.md

@ant-design-bot
Copy link
Contributor

ant-design-bot commented Jun 12, 2020

@ant-design-bot
Copy link
Contributor

ant-design-bot commented Jun 12, 2020

@@ -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);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个测试 不应该是判断 渲染的 children 是 Fallback

Copy link
Contributor Author

@sosohime sosohime Jun 12, 2020

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)

} 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>
);
}
}

@codesandbox-ci
Copy link

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:

Sandbox Source
antd reproduction template Configuration

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants