Responsive images in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Next.js Image component.

NextJS

import [1] from 'next/image';

Drag options to blanks, or click blank then click option'

Aimg

BImage

CPicture

DNextImage

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'img' which is the HTML tag, not the Next.js component.

Using 'Picture' which is not a Next.js import.

Using 'NextImage' which is not the correct import name.

The Next.js Image component is imported as Image from 'next/image'.

2fill in blank

medium

Complete the code to set the image source to '/logo.png'.

NextJS

<Image src=[1] alt="Logo" width={100} height={100} />

Drag options to blanks, or click blank then click option'

A'logo.png'

B"logo.png"

C'/logo.png'

D"logo"

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the leading slash which causes the image not to load.

Using just the filename without extension.

Using incorrect quotes or missing quotes.

The src attribute requires the path starting with a slash for public folder images, so '/logo.png' is correct.

3fill in blank

hard

Fix the error in the code to make the image responsive using the 'fill' layout.

NextJS

<Image src="/banner.jpg" alt="Banner" [1] />

Drag options to blanks, or click blank then click option'

Aresponsive

Bfill={true}

Clayout="responsive"

Dlayout="fill"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'responsive' without quotes which causes syntax errors.

Using 'fill={true}' which is not a valid prop.

Using 'layout="responsive"' which is different from 'fill'.

Next.js Image uses layout="fill" to make the image fill its parent container responsively.

4fill in blank

hard

Fill both blanks to add width and height props for a fixed size image.

NextJS

<Image src="/avatar.png" alt="User Avatar" width=[1] height=[2] />

Drag options to blanks, or click blank then click option'

A150

B100

C200

D250

Attempts:

3 left

💡 Hint

Common Mistakes

Using strings instead of numbers for width and height.

Swapping width and height values incorrectly.

Omitting either width or height.

The width and height props must be numbers. Here width is 100 and height is 150 for a fixed size image.

5fill in blank

hard

Fill all three blanks to create a responsive image with priority loading and alt text 'Hero Image'.

NextJS

<Image src=[1] alt=[2] priority=[3] width={800} height={600} />

Drag options to blanks, or click blank then click option'

A"/hero.jpg"

B"Hero Image"

Ctrue

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Using alt text without quotes.

Setting priority to false which disables priority loading.

Omitting quotes around the src path.

Use the image path "/hero.jpg", alt text "Hero Image", and set priority to true for faster loading.