+import classNames from "classnames";
import { Component } from "inferno";
const iconThumbnailSize = 96;
const thumbnailSize = 256;
-const maxImageSize = 3000;
interface PictrsImageProps {
src: string;
alt?: string;
icon?: boolean;
+ banner?: boolean;
thumbnail?: boolean;
nsfw?: boolean;
iconOverlay?: boolean;
return (
<picture>
<source srcSet={this.src("webp")} type="image/webp" />
+ <source srcSet={this.props.src} />
<source srcSet={this.src("jpg")} type="image/jpeg" />
<img
- src={this.src("jpg")}
+ src={this.props.src}
alt={this.alt()}
- className={`
- ${!this.props.icon && !this.props.iconOverlay && "img-fluid "}
- ${
- this.props.thumbnail && !this.props.icon
- ? "thumbnail rounded "
- : "img-expanded "
- }
- ${this.props.thumbnail && this.props.nsfw && "img-blur "}
- ${this.props.icon && "rounded-circle img-icon mr-2 "}
- ${this.props.iconOverlay && "ml-2 mb-0 rounded-circle avatar-overlay "}
- ${this.props.pushup && "avatar-pushup "}
- `}
+ title={this.alt()}
+ loading="lazy"
+ className={classNames("overflow-hidden pictrs-image", {
+ "img-fluid": !this.props.icon && !this.props.iconOverlay,
+ banner: this.props.banner,
+ "thumbnail rounded object-fit-cover":
+ this.props.thumbnail && !this.props.icon && !this.props.banner,
+ "img-expanded slight-radius":
+ !this.props.thumbnail && !this.props.icon,
+ "img-blur": this.props.thumbnail && this.props.nsfw,
+ "object-fit-cover img-icon me-1": this.props.icon,
+ "ms-2 mb-0 rounded-circle object-fit-cover avatar-overlay":
+ this.props.iconOverlay,
+ "avatar-pushup": this.props.pushup,
+ })}
/>
</picture>
);
// sample url:
// http://localhost:8535/pictrs/image/file.png?thumbnail=256&format=jpg
- let split = this.props.src.split("/pictrs/image/");
+ const split = this.props.src.split("/pictrs/image/");
// If theres not multiple, then its not a pictrs image
if (split.length == 1) {
return this.props.src;
}
- let host = split[0];
- let path = split[1];
+ const host = split[0];
+ const path = split[1];
- let params = { format };
+ const params = { format };
if (this.props.thumbnail) {
params["thumbnail"] = thumbnailSize;
} else if (this.props.icon) {
params["thumbnail"] = iconThumbnailSize;
- } else {
- params["thumbnail"] = maxImageSize;
}
- let paramsStr = `?${new URLSearchParams(params).toString()}`;
- let out = `${host}/pictrs/image/${path}${paramsStr}`;
+ const paramsStr = new URLSearchParams(params).toString();
+ const out = `${host}/pictrs/image/${path}?${paramsStr}`;
return out;
}