在 Next.js 中，import Image from \'next/image\' 是用来加载和优化图片的。next/image 提供了自动图片优化功能，可以在加载时根据设备的大小和解析度提供最佳的图片尺寸，并且支持懒加载，提升性能

基本用法

首先，从 next/image 中导入 Image 组件：

export default function Home() {
return (
<div>
<h1>My Image</h1>
<Image
src="/images/my-image.jpg" // 本地图片路径
alt="A description of the image"
width={500} // 指定图片宽度
height={300} // 指定图片高度
/>
</div>
);
}

远端图片加载

如果你想从外部来源加载图片，需要先在 next.config.js 中配置允许的外部图片域名：ex:如果我要使用pexels远程图片

/** @type {import(\'next\').NextConfig} */
const nextConfig = {
images: {
remotePatterns: [
{
protocol: \'https\',
hostname: \'images.pexels.com\',
},
],
}
};

export default nextConfig;

取得 Pexels 图片的正确 URL

点击图片右键 选择 copy image address

import styles from \'./about.module.css\';
function AboutPage() {
return (
<div className={styles.imgContainer}>
<div>
<Image
src=\'https://images.pexels.com/photos/28874283/pexels-photo-28874283/free-photo-of-minimal-workspace-with-laptop-and-coffee-mug.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\'
alt=\'about\'
layout=\'responsive\'
width={50}
height={100}
objectFit=\'cover\'
/>
</div>
</div>
);
}

export default AboutPage;

解释：

  • remotePatterns 允许你更灵活地控制图片的远程 URL。你可以不仅指定域名（hostname），还可以指定协议（protocol）、路径（pathname）等。
  • 这种方式适合在你需要允许某个域名的特定部分（比如特定路径或协议）的时候使用。它提供了更多的过滤条件。
  • 例如，如果你想允许 Pexels 的图片，只允许来自 https 协议的图片，你可以用 remotePatterns 来进行这种精细的控制。

也可以只设定 domains

// next.config.js
/** @type {import(\'next\').NextConfig} */
const nextConfig = {
images: {
domains: [\'images.pexels.com\'],
}
};

export default nextConfig;

注意事项

  • 确保正确的图片 URL：远程图片的 URL 必须正确，并且包含在你允许的域名列表中。
  • 宽度和高度：next/image 需要指定图片的 width 和 height，你可以根据实际需求来调整这些参数。