Day 1 — Add an Image
Day 1 · Topic 12 of 15Hands-on practice
Foundations & build/Add an Image
02
Hands-on #02 — The Next.js <Image /> Component
Hands-on #02
The Next.js <Image /> Component
Add a safely sized image to the same ProfileCard component.
Why use <Image />?
Standard <img> tag
You manually choose loading, sizing, and optimisation. Missing dimensions can cause the page to move while loading.
Next.js <Image /> tag
Helps optimise the file, lazy-loads by default, and reserves the image shape using its width and height.
Exercise
- Drop a photo into the
public/folder (example:public/profile.png). - Import Image:
import Image from "next/image" - Add a parameter into the function (
imageSrc). - Then add <Image /> to your component.
src/components/ProfileCard.js
1import Image from "next/image";2 3export function ProfileCard({ name, title, desc, imageSrc }) {4 return (5 <div className="flex items-center gap-4 text-gray-900">6 <Image7 src={imageSrc}8 alt={name}9 width={96}10 height={96}11 />12 13 <div>14 <h2 className="text-xl font-semibold">{name}</h2>15 <p className="text-gray-600">{title}</p>16 <p className="mt-1 text-sm">{desc}</p>17 </div>18 </div>19 );20}public/ paths
File at
public/profile.png → use imageSrc="/profile.png" (leading slash, no public in the path).A personal photo is optional
You may use an avatar, illustration, pet, or other non-sensitive image. Do not put private information on a card you may publish later.
Need a safe fallback image?
Choose either picture. Both buttons save it as profile.png. Move that file into your project's public/ folder. The later imageSrc="/profile.png" examples will work without any renaming.
Now see yourself on your own website
After Hands-on #03 wires the About page, your photo will show on /about.
Done when
ProfileCard receives imageSrc and renders a Next.js <Image /> with alt, width, and height.