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

Add support to pass additional props to the Avatar's img element #908

Closed
mlaursen opened this issue Aug 4, 2020 · 0 comments · Fixed by #910
Closed

Add support to pass additional props to the Avatar's img element #908

mlaursen opened this issue Aug 4, 2020 · 0 comments · Fixed by #910

Comments

@mlaursen
Copy link
Owner

mlaursen commented Aug 4, 2020

Description

The Avatar component should support passing all available image props to the <img> tag to help support the referrerPolicy. See this stackoverflow thread for an error with google profile pics.

Proposal

The Avatar will be updated to have two new props: referrerPolicy and imgProps.

Examples with new props:

<Avatar src="https://some.domain/path/to/img.png" referrerPolicy="no-referrer"  />
<Avatar imgProps={{ src: 'https://some.domain/path/to/img.png', referrerPolicy: 'no-referrer' }} />

So any other props (or ref) can be passed as well:

const imgRef = useRef();

return (
  <Avatar
    src="https://some.domain/path/to/img.png"
    imgProps={{
      ref: imgRef,
      style: {}
      className: 'custom',
      referrerPolicy: 'origin-when-cross-origin',
      // other props
    }}
  />
);

Note: any imgProps will be merged with the default implementation and imgProps will take precedence over the "root level" img, src, and referrerPolicy.

Workaround

The current workaround is to just manually provide the <img> as a child instead:

<Avatar>
  <img
    src=="https://some.domain/path/to/img.png"
    style={{ width: 'auto', height: '100%' }}
    referrerPolicy="no-referrer"
  />
</Avatar>
@mlaursen mlaursen changed the title [Avatar] Add a new imgProps prop to support [Avatar] Add a new imgProps prop to support reffererPolicy behavior Aug 4, 2020
@mlaursen mlaursen changed the title [Avatar] Add a new imgProps prop to support reffererPolicy behavior [Avatar] Add support to pass additional props to the img element Aug 4, 2020
@mlaursen mlaursen added this to the v2.2.0 milestone Aug 4, 2020
@mlaursen mlaursen changed the title [Avatar] Add support to pass additional props to the img element Add support to pass additional props to the Avatar's img element Aug 6, 2020
mlaursen added a commit that referenced this issue Aug 7, 2020
mlaursen added a commit that referenced this issue Aug 7, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant