该视频仅会员有权观看
立即开通课程「Next.js 前端应用开发实践」权限。
- 可以在内容列表页面显示内容图像。
- 通过操作pos miss item组件，从其data属性中获取file结构，再定义一个图像URL，由up config ABI base URL、文件ID和尺寸设置组成。
- 修改组件视图，使用next image的src属性设置图像URL，并配置alt属性和quality设置为100。
- 解决本地开发环境中的host主机名未配置在应用的images中的问题，需要在next config的images中添加domains包括localhost和生产环境使用的主机名。
- 重启开发服务并刷新页面后，内容列表和单个内容页面都能显示对应图像。
- 在单个内容页面中，从post对象中获取文件结构，准备图像地址，并使用size参数设置大尺寸的图像。
- 修改图片视图样式，设置为relative，设置尺寸，包装一个image组件，并设置对象的fit属性为contain以及文本对齐为center。
- 刷新浏览器后，内容相关的图像将显示在页面上。
下一节
定义登录时需要用的数据与方法（useLogin）
