jake/jarv.is
jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-27 02:38:27 -04:00
Code Issues

validate <Image /> inputs a bit more

Browse Source
This commit is contained in:
Jake Jarvis 2022-06-11 09:50:46 -04:00
parent fe634738ef
commit d7bc5f8ab6
Signed by: jake
GPG Key ID: 2B0C9CF251E69A39
1 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
components/Image/Image.tsx
View File

@ -29,43 +29,47 @@ const Image = ({
src, src,
width, width,
height, height,
priority,
alt = "",
quality = DEFAULT_QUALITY, quality = DEFAULT_QUALITY,
layout = DEFAULT_LAYOUT, layout = DEFAULT_LAYOUT,
placeholder, placeholder,
href, href,
className,
...rest ...rest
}: ImageProps) => { }: ImageProps) => {
const imageProps: Partial<NextImageProps> = { const imageProps: Partial<NextImageProps> = {
width: typeof width === "string" ? Number.parseInt(width.replace("px", "")) : width, // strip "px" from dimensions: https://stackoverflow.com/a/4860249/1438024
height: typeof height === "string" ? Number.parseInt(height.replace("px", "")) : height, width: typeof width === "string" ? Number.parseInt(width, 10) : width,
priority: !!priority, height: typeof height === "string" ? Number.parseInt(height, 10) : height,
alt,
quality, quality,
layout, layout,
placeholder, placeholder,
...rest,
}; };
if (typeof src === "object") { if (typeof src === "object" && (src as StaticImageData).src !== undefined) {
// static image imports: extract variables from the src object
const staticImg = src as StaticImageData; const staticImg = src as StaticImageData;
// all data for statically imported images is extracted from the object itself.
imageProps.src = staticImg; imageProps.src = staticImg;
// default to blur placeholder while loading if it's been generated for us // default to blur placeholder while loading if it's been generated for us.
imageProps.placeholder = placeholder || (staticImg.blurDataURL ? "blur" : "empty"); imageProps.placeholder = placeholder || (staticImg.blurDataURL !== undefined ? "blur" : "empty");
} else { } else if (typeof src === "string") {
// regular path to a file was passed in, which makes explicit width and height required. // regular path to a file was passed in, which makes explicit width and height required.
// https://nextjs.org/docs/api-reference/next/image#width
if (layout !== "fill" && (!width || !height)) {
throw new Error("'width' and 'height' are required for non-statically imported images.");
}
// optionally prepending src with "/public" makes images resolve properly in GitHub markdown previews, etc. // optionally prepending src with "/public" makes images resolve properly in GitHub markdown previews, etc.
imageProps.src = (src as string).replace(/^\/public/g, ""); imageProps.src = src.replace(/^\/public/g, "");
} else {
throw new TypeError("'src' should be a string or a valid StaticImageData object.");
} }
// @ts-ignore // @ts-ignore
const img = <RoundedImage {...imageProps} {...rest} />; const img = <RoundedImage {...imageProps} />;
return ( return (
<Wrapper className={className}> <Wrapper>
{href ? ( {href ? (
<Link href={href} underline={false}> <Link href={href} underline={false}>
{img} {img}