Nuxt 框架提供了一套模块系统可以扩展框架功能，我们可以自己开发 Nuxt 模块，也可以使用现成的模块。下面我们通过安装使用 image 模块来理解一下如何在 Nuxt 框架使用模块。

在终端，项目所在目录的下面，先安装一下需要的模块，因为 Nuxt 模块都可以通过 npm 进行分发，所以跟一般的 package 没有什么区别。执行 npm install @nuxt/image-edge --save-dev 。

安装了模块以后，需要在项目的配置文件里配置一下，打开 nuxt.config.ts，先添加一个 modules 属性，它里面的东西就是在项目里要使用的模块。一个数组，里面添加一个 @nuxt/image-edge。

安装的模块可能会附带一些相关的配置，比如这个 image 模块会在配置里面添加一个名字是 image 的配置。在配置里添加一个 image 属性，它的值是一个对象，可以配置一下 image 模块的使用。比如添加一个 domains，它的值是允许优化图像的域名，添加一个 resources.ninghao.net，这样 image 模块就可以优化显示在这个域名下的图像了。

新建一个页面，放在 pages 里面，名字是 portfolio.vue，一组 template，在组件的模板里我们先用一下 img 这个元素显示图像
设置一下 src 属性，它的值是要显示的图像的地址，https://resources.ninghao.net/images/4612.jpg。

在浏览器上先观察一下，打开 /portfolio 这个地址，在开发者工具，打开 网络选项卡，过滤出图像资源。刷新一下页面，现在页面上显示的这个图像的大小是 2.2MB，右键点击图像，在新标签打开，在标签上会显示当前这张图片的尺寸，宽度是 5184 。

回到项目，把这个 img 换成 nuxt-img 组件，它是安装了 image 模块以后带的一个组件，不需要导入，可以直接使用它。

再回到浏览器观察一下，刷新一下页面，这回在页面上显示的这个图像的大小变成了 1.1MB，之前是 2.2MB，原因就是 image 模块优化了要显示的图像的大小。

在这个 nuxt-img 组件的上面，用 quality 可以设置一下图像质量，比如 80 ，表示要使用 80% 质量，再用 width 属性可以设置一下图像的宽度，设置成 2000。

回到浏览器，刷新一下页面，这次页面上显示的图像的大小是 155KB ，比之前优化之后的图像又小了很多。原因是我们修改了图像的质量，还有它的尺寸。右键点击，在新标签打开，在标签上显示这张图片的宽度现在是 2000。