Img component now support raw url
This commit is contained in:
parent
add0522095
commit
a1644ab47f
@ -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}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user