Using Images

"Add a hero image using this URL: https://example.com/hero.jpg"

"Add an image to the about page. I'll upload it to the public folder."

"Use placeholder images from Unsplash for the team section.
Search for professional headshots."

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero image"
  width={1200}
  height={600}
  priority
/>

"Convert all img tags to Next.js Image components with
proper width, height, and alt text"

// For responsive images
<Image
  src="/product.jpg"
  alt="Product"
  sizes="(max-width: 768px) 100vw, 50vw"
  fill
/>

<div className="relative w-full h-64">
  <Image
    src="/hero.jpg"
    alt="Hero"
    fill
    className="object-cover"
  />
</div>

<Image
  src="/photo.jpg"
  alt="Photo"
  width={800}
  height={600}
  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
/>

"I want to use images from unsplash.com.
Can you add it to the Next.js image configuration?"

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'images.unsplash.com',
      },
    ],
  },
};

"Add image upload functionality that saves to Supabase storage
and displays in the user's profile"

const imageUrl = supabase.storage
  .from('avatars')
  .getPublicUrl(fileName);

<Image src={imageUrl} alt="Avatar" width={100} height={100} />

<div
  className="bg-cover bg-center h-96"
  style={{ backgroundImage: 'url(/pattern.svg)' }}
>
  Content here
</div>

<div className="relative h-96">
  <Image src="/hero.jpg" alt="" fill className="object-cover" />
  <div className="absolute inset-0 bg-black/50" />
  <div className="relative z-10 text-white">
    Content here
  </div>
</div>

import { Home, Settings, User } from 'lucide-react';

<Home className="w-6 h-6" />

<svg className="w-6 h-6" viewBox="0 0 24 24">
  {/* SVG paths */}
</svg>

// ❌ Bad
<Image src="/team.jpg" alt="image" />
<Image src="/team.jpg" alt="" />

// ✅ Good
<Image src="/team.jpg" alt="Our team of five developers at the office" />

<Image src="/decoration.svg" alt="" role="presentation" />

"Create a hero section with a large background image,
overlay, and centered text content"

"Add an image gallery with a grid layout that opens
images in a lightbox when clicked"

"Add user avatars to the comments section using the
user's profile image from Supabase storage"