Update Image component to match next/image updates

components/Blocks/ImageBlock/ImageBlock.tsx

@@ -2,10 +2,12 @@ import { BlockProps } from '../index';
 import Image from '@/components/Image/Image';
 
 type Props = BlockProps & {
-	src: string,
 	alt: string,
+	src: string,
 };
 
 export default function ImageBlock ( props : Props ) {
-	return <Image {...props} alt={props.alt} />
+	const { block: _omit, ...imageProps } = props;
+
+	return <Image {...imageProps} alt={props.alt} />
 }

components/Image/Image.test.tsx

@@ -11,7 +11,7 @@ describe( 'Image', () => {
 	describe( 'with a WordPress image URL', () => {
 		const src = '/wp-content/uploads/you-otter-see-this.jpg';
 
-		it( 'renders an img with a placeholder `src`', () => {
+		it( 'uses native lazy-loading', () => {
 			render(
 				<Image
 					alt={altText}
@@ -24,7 +24,7 @@ describe( 'Image', () => {
 			const image = screen.getByRole( 'img' );
 
 			expect( image ).toBeInTheDocument();
-			expect( image.getAttribute( 'src' ).startsWith( 'data:image/' ) ).toBe( true );
+			expect( image.getAttribute( 'loading' ) ).toEqual( 'lazy' );
 		} );
 
 		it( 'has its `src` transformed by the image loader when loaded', () => {
@@ -63,7 +63,7 @@ describe( 'Image', () => {
 	describe( 'with a non-WordPress image URL', () => {
 		const src = '/you-otter-see-this.jpg';
 
-		it( 'renders an img with a placeholder `src`', () => {
+		it( 'uses native lazy-loading', () => {
 			render(
 				<Image
 					alt={altText}
@@ -76,7 +76,7 @@ describe( 'Image', () => {
 			const image = screen.getByRole( 'img' );
 
 			expect( image ).toBeInTheDocument();
-			expect( image.getAttribute( 'src' ).startsWith( 'data:image/' ) ).toBe( true );
+			expect( image.getAttribute( 'loading' ) ).toEqual( 'lazy' );
 		} );
 
 		it( 'has its `src` transformed by the default Next.js image loader when loaded', () => {

components/Image/Image.tsx

@@ -22,20 +22,18 @@ function wpImageLoader ( { quality, src, width }: ImageLoaderProps ): string {
 }
 
 export default function Image ( props: Props ) {
-	const imageProps = {
-		...props,
-		srcSet: props.srcset || undefined,
-		src: props.src,
-		alt: props.alt,
-		width: props.width || props.originalWidth,
-		height: props.height || props.originalHeight,
-		layout: props.layout || (props.width && props.height ? 'fixed' as const : 'intrinsic' as const),
-	};
+	const { originalHeight, originalWidth, ...imageProps } = props;
+	const height = props.height || originalHeight;
+	const width = props.width || originalWidth;
 
-	if ( VipConfig.images.useHtmlTag && imageProps.srcSet ) {
+	if ( VipConfig.images.useHtmlTag && props.srcset ) {
 		return (
 			// eslint-disable-next-line @next/next/no-img-element
-			<img alt={imageProps.alt} {...imageProps} />
+			<img
+				{...imageProps}
+				alt={props.alt}
+				srcSet={props.srcset}
+			/>
 		);
 	}
 
@@ -47,6 +45,11 @@ export default function Image ( props: Props ) {
 	}
 
 	return (
-		<NextImage loader={loader} {...imageProps} />
+		<NextImage
+			{...imageProps}
+			height={height}
+			loader={loader}
+			width={width}
+		/>
 	);
 }

next.config.js

@@ -161,8 +161,7 @@ module.exports = {
 	images: {
 		// If you know the expected device widths of your users, you can specify a
 		// list of device width breakpoints using the deviceSizes property here.
-		// These widths are used when the next/image component uses layout="responsive"
-		// or layout="fill" to ensure the correct image is served for user's device.
+		// These widths are used to help the next/image component generate srcsets.
 		deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
 		// The reason there are two separate lists is that imageSizes is only used
 		// for images which provide a sizes prop, which indicates that the image

pages/media/index.module.css

@@ -6,9 +6,14 @@
 }
 
 .image {
+	object-fit: cover;
+}
+
+.image-link {
 	background-color: #ccc;
 	border: solid 1px #000;
 	display: block;
 	height: 100px;
+	overflow: hidden;
 	position: relative;
 }

pages/media/index.tsx

@@ -26,43 +26,25 @@ export default function Media( props: Props ) {
 						const {
 							altText = '',
 							id,
-							mediaDetails: {
-								height,
-								width,
-							},
 							sourceUrl,
 						} = mediaItem;
 
 						// Each image is displayed in a fixed-height box of 100px. If the
 						// actual height of the image is less than 100px, then use
-						// layout=fill and objectFit to fill the box.
 						return (
 							<a
-								className={styles.image}
+								className={styles['image-link']}
 								href={sourceUrl}
 								key={id}
 								rel="noreferrer"
 								target="_blank"
 							>
-								{
-									height < 100
-										?
-										<Image
-											alt={altText}
-											layout="fill"
-											objectFit="cover"
-											objectPosition="0"
-											src={sourceUrl}
-										/>
-										:
-										<Image
-											alt={altText}
-											layout="intrinsic"
-											height={100}
-											src={sourceUrl}
-											width={width / height * 100}
-										/>
-								}
+								<Image
+									alt={altText}
+									className={styles.image}
+									fill={true}
+									src={sourceUrl}
+								/>
 							</a>
 						);
 					} )

styles/new.css

@@ -173,7 +173,7 @@ header {
 	background: var(--nc-bg-2);
 	border-bottom: 1px solid var(--nc-bg-3);
 	padding: 2rem 1.5rem;
-	
+
 	/* This sets the right and left margins to cancel out the body's margins. It's width is still the same, but the background stretches across the page's width. */
 
 	margin: -2rem calc(0px - (50vw - 50%)) 2rem;
@@ -185,7 +185,7 @@ header {
 
 	margin-left: calc(0px - (50vw - 50%));
 	margin-right: calc(0px - (50vw - 50%)); */
-	
+
 	padding-left: calc(50vw - 50%);
 	padding-right: calc(50vw - 50%);
 }
@@ -428,5 +428,6 @@ input {
 }
 
 img {
+	height: auto;
 	max-width: 100%;
-}
+}