Img component now support raw url

This commit is contained in:
DrMint 2022-04-23 20:29:38 +02:00
parent add0522095
commit a1644ab47f

View File

@ -3,38 +3,29 @@ import Image, { ImageProps } from "next/image";
interface Props { interface Props {
className?: string; className?: string;
image?: UploadImageFragment; image?: UploadImageFragment | string;
quality?: ImageQuality; quality?: ImageQuality;
alt?: ImageProps["alt"]; alt?: ImageProps["alt"];
layout?: ImageProps["layout"]; layout?: ImageProps["layout"];
objectFit?: ImageProps["objectFit"]; objectFit?: ImageProps["objectFit"];
priority?: ImageProps["priority"]; priority?: ImageProps["priority"];
rawImg?: boolean;
} }
export default function Img(props: Props): JSX.Element { export default function Img(props: Props): JSX.Element {
if (props.image?.width && props.image?.height) { if (typeof props.image === "string") {
return (
<img
className={props.className}
src={props.image}
alt={props.alt ?? ""}
/>
);
} else if (props.image?.width && props.image.height) {
const imgSize = getImgSizesByQuality( const imgSize = getImgSizesByQuality(
props.image.width, props.image.width,
props.image.height, props.image.height,
props.quality ?? ImageQuality.Small props.quality ?? ImageQuality.Small
); );
if (props.rawImg) {
return (
// eslint-disable-next-line @next/next/no-img-element
<img
className={props.className}
src={getAssetURL(
props.image.url,
props.quality ?? ImageQuality.Small
)}
alt={props.alt ?? props.image.alternativeText ?? ""}
width={imgSize.width}
height={imgSize.height}
/>
);
}
return ( return (
<Image <Image
className={props.className} className={props.className}