Shadcn migration - image

[pettinarip]

Description

Exports the default image component to be used in the UI transition.

[netlify]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	cae511c
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/66b4f319e26850000848ee54
😎 Deploy Preview	https://deploy-preview-13601--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 44 (🔴 down 5 from production) Accessibility: 93 (no change from production) Best Practices: 91 (🔴 down 7 from production) SEO: 92 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[wackerow]

@pettinarip How do we want to handle any image sources that are external to the repo? Events, for example, will now be displaying external hosted images. To my knowledge, we have have a few options for rendering these:

• Allowlist the image domain and use Next Image (which we wouldn't necessarily know)
• Download the images in a separate task and import directly
• Or just use the img element without the Next wrapper (foregoing any optimization Next offers)

Any thoughts on this, and do you think we should add a touch of logic here to differentiate the image source, and avoid the Next Image component if needed? Or should we just use img directly in those cases, and not bother importing this component? We currently get eslint @next/next/no-img-element warnings when doing this.

[pettinarip]

Good question, I don't have an easy answer. I guess it depends.

Before I continue, I don't think this needs to be part of the scope of this PR. This PR just exports the default next image component to keep the current implementation and help with the UI transition.

• If we know in advance where these images are coming from, I would lean towards adding these domains to the allowlist. But I would only do that in the case where we only have a few domains and we don't need to maintain too much (I would not expect that to happen).
• Using the img seems like the easiest solution, but we lack optimizations & security.
• and downloading images will require some prep work + maintaining the images...

So I would choose one of the following options:

1. I would choose the first option if the domains are predefined and don't change.
2. I would store the images in a separate cloud service and consume them from there (adding that to the allowlist).