Next.js 框架里的 Image 组件可以优化在应用里要显示的图像。

演示页面

在应用里创建一个页面组件，放在 app/portfolio 目录里面，名字是 page.tsx，在文件里定义一个组件。

在浏览器上访问一下 portfolio 这个地址，显示的就是刚才创建的这个 Portfolio 页面组件。

Image

在 Next.js 应用里要显示图像需要使用 Image 这个组件，在文件顶部导入 Image，来自 next/image 这个包。

在组件里显示本地图像，可以使用图像的本地的地址，也可以导入这个本地图像文件。

在 public/images 目录里有一些图像文件。public 目录里的东西是公开的资源，可以直接在组件使用。

在组件的视图里面，添加一组 div，里面包装一个 Image，设置一下它的 src 属性，它的值可以是导入的静态文件，也可以是图像的本地的地址，如果使用本地地址，应该是 /images/4612.jpg，注意这里不需要加上 public 目录。

这个 Image 组件还需要一个 alt 属性，它的值可以描述一下这个图像，如果没有描述，可以使用一个空白。保存一下文件，现在页面上会报错，提示要设置图像的宽度。

在 Image 组件上面，需要设置一下图像的宽度还有高度，或者也可以添加 fill 这个属性。先设置一下图像的宽度还有高度，width 是 900，height 设置成 600。

现在，在这个 portfolio 页面上就会显示来自项目本地的一张图像。

导入显示

除了使用图像的本地地址，也可以用导入的方式显示本地图像，如果要导入本地图像，可以在文件顶部直接用 import 导入，起个名字叫 p1，图像的位置是 /public/images/4612.jpg，注意导入的需要，图像的路径里需要加上这个 public 目录。

把 Image 组件的 src 属性的值替换成在文件顶部导入的 p1。使用这种方式显示本地图像的时候就不需要设置图像的宽度还有高度了，因为导入的时候 Next.js 就已经知道图像的宽度还有高度了。去掉这两个属性，页面上显示了一张巨大的照片。

自适应

如果我们希望图像的显示跟随窗口的宽度变化，可以设置一下它的样式。

回到组件，先在组件里声明一个图像样式，名字是 imageStyle，类型是 CSSProperties，在它里面添加一个 width，把宽度设置成 100%，再把 height 设置成 auto。然后在 Image 组件上面添加一个 style 属性，它的值就是上面定义的 imageStyle。

你会发现，现在页面上显示的图像可以保持原有比例显示，再调整一下浏览器窗口的尺寸，图像的显示会随着窗口的变化而变化。