feat(render): reusable avatar component with IPFS support for members list

[moonia]

Summary:

This PR (related to #22) introduces a reusable avatar component that converts ipfs:// URIs into their corresponding https://ipfs.io/ipfs/ gateway URLs.

Screenshot:

Note: The fallback avatar used here is temporary and will be replaced with a better default image

TODO:

• Support web2 image links -> data URI SVG
• Pinata gateway -> IPFS gateway

[moonia]

would it be better if I handled avatar resizing on my side, or should we require users to upload avatar that are already resized to specific dimensions before providing the IPFS link? or any other ideas?

wdyt?

[n0izn0iz]

For the record, there has been a signal discussion and agreement to support image resizing in gnoweb directly via image embed params maybe with this syntax: ![](https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png | width=100). But it's not implemented yet

So I think for now, to resize, we use a datauri svg that embeds a sized image (I know it sound dumb but it's the best way to go forward on sized image for now I think, unless you have another hack)

In any case, we can't expect the profile avatar field to have a specific size or ratio, or even point to an image, it's permissionless. The ui can decide to not show the image, but we can't rely on "requesting users/client to respect a format/size/ratio".

[moonia]

Thank you @n0izn0iz for your answer!

That makes sense, so I’ll see what I can do for now. Maybe using a data URI SVG if I can't find anything else (I wanted to try this first).

I'm trying to keep it simple for now, so once image resizing support is implemented in gnoweb, we can clean this up and rely on proper syntax instead :)

[moonia]

For the moment, I'm (temporarily) resizing IPFS images using URL query parameters (Pinata Image Optimization) and it's working.

[n0izn0iz]

Mmh

• I thought only ipfs.io was authorized as gateway, see the documentation
• This will only work with ipfs link and not web2 image links that users might enter in profile field so we need a more consistent solution
• I already asked for a pinata gateway to be authorized but it was ignored
• If this really works without modifying gnoweb, you probably found an "exploit" since it should not be working

[moonia]

yes I thought too and it works for now since Gnoweb doesn’t block the Pinata gateway but I’ll switch to ipfs.io.
For the Web2 image issue, I’ll improve this by using a data URI SVG.

[n0izn0iz]

Can you open an issue upstream please?

[jefft0]

Hello @moonia and @n0izn0iz . We also use the avatar from /r/demo/profile in dSocial. We opened an issue about standardizing the avatar string format. gnolang/gno#2598 . Do you think that issue is resolved by this PR (in the case of images on IPFS)?

[moonia]

Hello @moonia and @n0izn0iz . We also use the avatar from /r/demo/profile in dSocial. We opened an issue about standardizing the avatar string format. gnolang/gno#2598 . Do you think that issue is resolved by this PR (in the case of images on IPFS)?

Hi,
we handle IPFS images well, so that part is covered. The only remaining problem is resizing IPFS images. I tried using Pinata, which allows resizing via query parameters, but since Pinata is not in the list of gateways authorized by gnoweb, this only works on localhost.

I’ll take a closer look at this issue, thnks!