Add support for StaticImageData with Avatar Components (NextJS)

[alexis-opolka]

In NextJS, the most common way to import and use an image, at least for local images, is to do as the documentation suggests (the documentation):

import MyImage from "../public/me.png"

When we import a local image this way, the MyImage variable is an object from the StaticImageData interface.

For now, a way I found to use the Avatar component in NextJs with the approach I cited above is to pass the src attribute of StaticImageData instead of the whole object. Would it be possible to add support for it?

[lesliecdubs]

Hi @alexis-opolka! We think this addition makes sense if you'd like to open a PR to suggest the enhancement for review.

[alexis-opolka]

Hi @lesliecdubs, I'm not sure how to do that but I will give it a try. ^-^

[lesliecdubs]

@alexis-opolka in case it helps, here's some documentation on getting started contributing to primer/react: https://primer.style/react/getting-started and https://github.com/primer/react/blob/main/contributor-docs/CONTRIBUTING.md. Let us know if you have questions.

[broccolinisoup]

Note for the next Primer Planning session:

We have a PR for this issue and I reviewed it however, while reviewing it I realised that for our avatar case, it makes sense to only* use the src attribute from the imported object unless we do some API changes (Thanks to the author who brought this up to my attention)

When I look at the API in the example that is shared in this issue, I can see that the src prop accepts StaticImageData type and automatically determine the width and height of the image based on the imported file. which I am not sure if want to do that because we have a pre-defined avatar sizes that start at 16px and increment by base-4 until 32px.

import Image from 'next/image'
import profilePic from '../public/me.png'
 
export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="Picture of the author"
      // width={500} automatically provided
      // height={500} automatically provided
      // blurDataURL="data:..." automatically provided
      // placeholder="blur" // Optional blur-up while loading
    />
  )
}

Because of that I have a concern about the need for passing an object if we are not leveraging passing the width and height and all these additional props - this is why I wanted to bring this up again for the planning. Any insights are appreciated 🙏

[alexis-opolka]

I think it would be "easier" to work with Primer/react on a NextJS project if we're able to pass the StaticImageData object directly into the Avatar component, that said, it also seems pointless to add the support to do so if we're not leveraging anything other than the src attribute.