@washingtonpost/wpds-avatar v1.24.0
Avatar
Using next/image
Some important things to note when using next/image with the wpds avatar component.
- The next/image expects a pixel value to be passed into the height and width props. You can find the token to pixel mappings in the size documentation.
- In order for the image to fit correctly in the container you need to specify
layout="fixed"
. - If you're having issues, double check that you're passing in a loader
import { Avatar } from "@washingtonpost/wpds-ui-kit";
const myLoader = ({ src }) => {
return `${src}`;
};
function Component() {
<Avatar size="200">
<img
src="https://i.pravatar.cc/300/300"
alt="An avatar is an atomic component that represents an individual’s identity through a circular photo."
/>
</Avatar>
<Avatar>
<Image
loader={myLoader}
src="https://i.pravatar.cc/300/300"
width="32" //pixel equivalent of 200 token
height="32" //pixel equivalent of 200 token
layout="fixed"
alt="An avatar is an atomic component that represents an individual’s identity through a circular photo."
/>
</Avatar>
}
1 month ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
4 months ago
4 months ago
5 months ago
8 months ago
8 months ago
7 months ago
7 months ago
7 months ago
9 months ago
7 months ago
8 months ago
9 months ago
6 months ago
10 months ago
10 months ago
11 months ago
11 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago