[Question] Best practice for showing profile image

[friedger]

There are some solutions out there to show the profile picture of the user:

• use something like < img src="userProfileImageUrl"/> => results in loading 3rd party resources flagged by this extension
• use proxying on the hosting server like in https://github.com/REBL-Stack/starter-app/commit/66fd3bee4eadfbe897f683a7aea03a71f683eece => results in more requirements on the hosting service provider than just static hosting and makes it more difficult for users to self-host
• use a default image for all users => results in less personalized experienced for users and less trust in the app
• use prefetched data and then base64 encoded image source => results in overly complicated code and bad performance

What is best practice for loading the profile image of the current user?

[njordhov]

Another way to show the profile image from the avatarUrl of the Blockstack SDK is to:

1. Fetch the avatarUrl image as a blob at time of rendering, with cors enabled,
2. Use URL.createObjectURL to create a blob url for the loaded image.
3. Inject the blob url as the src of an image element.

The dCrypt and Dappity apps both fetch the avatar image as above. I used a proxy in the REBL-Stack/starter-app for now, mainly to minimize the required changes to the code and keep it simple.

See also #1 Gaia Can't Be Evil