在这个内容列表页面上可以显示内容图像。打开 post-list-item 组件，在组件里，从 data 属性里面把 file 解构出来。

下面声明一个 imageUrl ，它的值先是 appConfig.apiBaseUrl，然后是 /files/ 后面加上文件的 id，然后是 /serve ，再用 size 查询符设置一下需要的尺寸，设置成 thumbnail。

修改一下组件视图，在这组 div 里面，用一下 Image 这个组件，它来自 next/image。src 属性的值设置成 imageUrl。把 width 设置成 64，height 也是 64 ，还需要设置一下 alt 属性。可以再把quality 设置成 100。

错误

页面提示 localhost 这个主机名没有在应用的 images 里配置好。这是因为在本地开发环境，后端接口的地址用的是 localhost 这个主机名。

打开 next.config，在 images 里面，添加一个 domains，里面添加一个 localhost，再添加一个 nid-node.ninghao.co，这是生产环境下用的后端应用的主机名。

在终端，重新启动一下应用的开发服务。刷新一下应用页面，现在这个内容列表页面上就会显示内容相关的图像了。

单个内容

打开一个单个内容页面，在这个页面上也可以显示内容图像。打开 posts/[id]/page，在这个页面组件 里，从 post 里把 file 解构出来。

再准备一个图像地址，先是 appConfig.apiBaseUrl，然后是 /files/ 后面加上文件的 id， 然后是 /serve ，再用 size 查询符设置一下需要的尺寸，设置成 large。

修改一下组件视图，在这个标题的上面添加一组 div，直接设置一下它的 style，position 设置成 relative，height 是 60vh。

它里面包装的是一个 Image 组件，src 的值是 imageUrl，alt 的值是 post.title，再添加一个 fill，设置一下 style 属性，把 objectFit 设置成 contain。

在这个组件的包装元素上面，再添加一个 style 属性，把 textAlign 设置成 center。

预览

在浏览器，再预览一下这个内容页面，现在页面上就会显示这个内容相关的图像了。