Anyone else having difficulty with Avatar circle?

[seancon]

Hi -

The new Avatar control is very cool when using Prime Icons!

However, I'm now trying to use an image and put it into the circle:

Code: Select all

<Avatar image={profilePicUrl} className="p-mr-2" size="xlarge" shape="circle" />

The picture is displayed, however the shape="circle" doesn't seem to be adhered to (it generates a square image, which happens to be the default option according to the documentation).

I reviewed the PrimeReact documentation and tried to figure out how they did it: I downloaded their "rounded pictures", and it appears they cheated and rounded the corners within the images rather than taking square images and using the "round" functionality - hmmm - maybe they encountered the same problem I have.

At any rate, has anyone been successful with rounding corners with an image in the component? I've seen on the w3schools that rounded images are a relatively easy style:

Code: Select all

img {
  border-radius: 50%;
}

Even applying the borderRadius doesn't seem to work:

Code: Select all

  <Avatar image={profilePicUrl} className="p-mr-2" style={{ borderRadius: '50%' }} size="xlarge" shape="circle" />

I'd prefer to keep the logic within the component if possible.

Thanks in Advance,

Sean

[seancon]

After further research, it would appear that someone forgot to attach the "p-avatar-circle" class to the actual image in the Avatar control. Once that is done, the image appears as a circle. Anyway someone on the dev team could fix this? I'd imagine it would be pretty simple.

I'm by no means an expert in Javascript, but the following seems to work for me - would appreciate it if someone more seasoned would commit this change if it makes sense:

Line 69 of Avatar.js:

Code: Select all

      } else if (this.props.image) {
          var imageClassName = (0, _ClassNames.classNames)({ 'p-avatar-circle': this.props.shape === 'circle' });
        return /*#__PURE__*/_react.default.createElement("img", {
          src: this.props.image,
            alt: "avatar",
            className: imageClassName
        });

Thanks!

Sean

[mert.sincan]

Thanks a lot for the report. Fixed in https://github.com/primefaces/primereact/issues/1773

Best Regards,