<Image>

常用方法

1.本地路径字符串（public 下的图片）

      <Image src="/assets/images/image.png" alt="logo" width={300} height={300} />

注意： 必填属性
src
alt,
width,
height

2.静态导入（推荐）——Next 可以自动知道图片的原始尺寸

      <Image src={logo} alt="logo"  />

注意： 必填属性
src
alt,

3.远程 URL

      <Image src="https://img2.baidu.com/it/u=2726150593,230956307&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=588" alt="image" width={200} height={200}/>

注意：
1.必填属性
src
alt,
width,
height
2.此外必须配置next.config.js如下：

images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'img2.baidu.com',
        pathname: '/**',
      },
    ],
  },