Renders a dump's preview image from another site, in the cards and the player, falling back to a generated placeholder.
Renders the image, and always renders something. It first loads the image
with no Referer, since hotlink protection (Cloudflare's is one click)
refuses a cross-site referrer but lets an empty one through. It then retries
through GET /api/remote/image for the hosts that refuse an empty referrer
too, and ends with the ThumbnailPlaceholder. An HTTP image goes
through the proxy from the first try, to avoid mixed content.
Passed to Thumbnail by a card or the player, from the dump's rich content.
- alt: string
-
className: string
Applies to the image only.
- loading: "lazy" | "eager"
-
placeholder: Omit<ThumbnailPlaceholderProps, "className">
Shown when there's no
srcor it fails to load. - placeholderClassName: string
-
sizes: number | string
The width the image is laid out at, as
imagePropstakes it. An image the API serves, the site's own or a proxied one, then loads no larger than that; another site's loads as that site sends it. -
src: string
The image's own URL, not proxied, since the fallbacks decide when to.
Usage
import * as mod from "src/components/shared/Thumbnail.tsx";