在这个内容列表项目里可以显示这个内容的图像。

打开内容列表页面组件，在组件的脚本里面先准备一下需要的配置，解构一下使用 useRuntimeConfig 返回的结果，需要的是它里面的 public ，继续解构这个 public，需要的是在它里面定义的 apiBaseUrl 这个配置。它的值是服务端应用接口的基本地址。

然后在组件的模板里找到这个内容列表循环，在它里面添加一组 div ，里面包装的是一个图像元素，

再绑定图像元素的 src 属性，值是一个字符模板，在里面先用一下 apiBaseUrl，然后是 /files 后面加上内容文件的 id，post.file.id，/serve ，这是服务端提供的图像文件服务的接口地址。这个接口支持使用 size 查询符设置需要的图像尺寸，设置成 thumbnail 。

绑定元素的 alt 属性，值可以设置成 post.title，也就是内容的标题。

然后在这个列表的包装元素上面，添加一个类，类的名字是 post-list，相关的样式已经在 default.css 这个样式表里设计好了。

下面给列表项目里的内容部分添加一个包装元素。在内容正文的上面再添加一个内容标题，一组 div，里面用一组 NuxtLink 组件 ，内容标题可以绑定输出 post.tiltle，绑定 NuxtLink 的 to 属性，值是内容页面的地址，/posts/${id} ，在后面我们会创建这个路由。