fix external image bug, update to pass all props, & ensure fallback size is applied

Author: jaffrepaul

src/components/docImage.tsx

@@ -6,6 +6,8 @@ import {DocImageClient} from './docImageClient';
 
 export default function DocImage({
   src,
+  width: propsWidth,
+  height: propsHeight,
   ...props
 }: Omit<React.HTMLProps<HTMLImageElement>, 'ref' | 'placeholder'>) {
   const {path: pagePath} = serverContext();
@@ -34,20 +36,26 @@ export default function DocImage({
   // parse the size from the URL hash (set by remark-image-size.js)
   const srcURL = new URL(src, 'https://example.com');
   const imgPath = srcURL.pathname;
-  const [width, height] = srcURL.hash // #wxh
+  const dimensions = srcURL.hash // #wxh
     .slice(1)
     .split('x')
     .map(s => parseInt(s, 10));
+  
+  // Use parsed dimensions, fallback to props, then default to 800
+  const width = !isNaN(dimensions[0]) ? dimensions[0] : 
+    (typeof propsWidth === 'number' ? propsWidth : 
+     typeof propsWidth === 'string' ? parseInt(propsWidth, 10) || 800 : 800);
+  const height = !isNaN(dimensions[1]) ? dimensions[1] : 
+    (typeof propsHeight === 'number' ? propsHeight : 
+     typeof propsHeight === 'string' ? parseInt(propsHeight, 10) || 800 : 800);
 
   return (
     <DocImageClient
       src={src}
       imgPath={imgPath}
       width={width}
       height={height}
-      alt={props.alt ?? ''}
-      style={props.style}
-      className={props.className}
+      {...props}
     />
   );
 }

src/components/docImageClient.tsx

@@ -4,14 +4,11 @@ import Image from 'next/image';
 
 import {ImageLightbox} from './imageLightbox';
 
-interface DocImageClientProps {
-  alt: string;
+interface DocImageClientProps extends Omit<React.HTMLProps<HTMLImageElement>, 'ref' | 'placeholder' | 'src' | 'width' | 'height'> {
   height: number;
   imgPath: string;
   src: string;
   width: number;
-  className?: string;
-  style?: React.CSSProperties;
 }
 
 export function DocImageClient({
@@ -22,6 +19,7 @@ export function DocImageClient({
   alt,
   style,
   className,
+  ...props
 }: DocImageClientProps) {
   const handleContextMenu = (e: React.MouseEvent) => {
     e.preventDefault(); // Prevent default context menu
@@ -42,9 +40,32 @@ export function DocImageClient({
     }
   };
 
+  // Check if dimensions are valid (not NaN) for Next.js Image
+  const isValidDimensions = !isNaN(width) && !isNaN(height) && width > 0 && height > 0;
+  
+  // For external images or invalid dimensions, fall back to regular img tag
+  if (src.startsWith('http') || !isValidDimensions) {
+    return (
+      <div onContextMenu={handleContextMenu} onClick={handleClick}>
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={src}
+          alt={alt ?? ''}
+          style={{
+            width: '100%',
+            height: 'auto',
+            ...style,
+          }}
+          className={className}
+          {...props}
+        />
+      </div>
+    );
+  }
+
   return (
     <div onContextMenu={handleContextMenu} onClick={handleClick}>
-      <ImageLightbox src={src} alt={alt} width={width} height={height}>
+      <ImageLightbox src={src} alt={alt ?? ''} width={width} height={height}>
         <Image
           src={src}
           width={width}
@@ -55,7 +76,8 @@ export function DocImageClient({
             ...style,
           }}
           className={className}
-          alt={alt}
+          alt={alt ?? ''}
+          {...props}
         />
       </ImageLightbox>
     </div>