面试题：Next.js 图像优化中Image组件的基础配置

Question

在Next.js项目中使用Image组件进行图像优化，简述如何配置Image组件以实现图像的基本加载和尺寸设置，同时说明src属性与传统HTML img标签src属性的区别。

Answer 1

配置Image组件实现基本加载和尺寸设置

1. 基本加载：在Next.js项目中，导入Image组件，通过src属性指定图像的路径。例如：

import Image from 'next/image';

function MyComponent() {
  return (
    <Image
      src="/path/to/image.jpg"
      alt="描述图片内容"
    />
  );
}

2. 尺寸设置：通过width和height属性设置图像的尺寸，单位为像素。例如：

import Image from 'next/image';

function MyComponent() {
  return (
    <Image
      src="/path/to/image.jpg"
      alt="描述图片内容"
      width={500}
      height={300}
    />
  );
}

src属性与传统HTML img标签src属性的区别

1. 路径处理：
   • Next.js Image组件src：支持相对路径（相对于项目根目录）和绝对路径，也支持远程URL。例如src="/public/images/logo.png"或src="https://example.com/image.jpg"。它会自动处理图像优化，包括调整图像大小、格式转换等。
   • 传统HTML img标签src：仅支持相对路径（相对于当前HTML文件位置）和绝对路径。例如<img src="images/logo.png">或<img src="https://example.com/image.jpg">，不会自动进行图像优化。
2. 优化功能：
   • Next.js Image组件src：会根据设备屏幕尺寸、视口大小等因素，智能地优化图像加载，选择最合适的图像尺寸和格式（如WebP），以提高页面性能和用户体验。
   • 传统HTML img标签src：需要手动配置srcset和sizes等属性来实现响应式图像加载，且不具备自动格式转换等优化功能。