创新实训-角色疆界（7）

  loadAvatar() {                             // 加载头像
      let avatar = localStorage.getItem("avatar") || Math.ceil(Math.random() * 9); // 从 localStorage 获取头像索引，如果不存在，则生成一个随机索引
      this.avatarIdx = avatar; // 设置头像索引
    },

loadAvatar()函数的作用是加载用户的头像。具体的功能如下：

1. 首先，函数尝试从浏览器的localStorage中获取名为"avatar"的值，这个值表示用户的头像索引。如果localStorage中不存在"avatar"的值，即用户之前没有设置过头像，那么函数会生成一个随机的头像索引。

2. 然后，函数将获取到的头像索引赋值给this.avatarIdx，以便在组件中使用。this.avatarIdx可能是从localStorage中获取的值，也可能是随机生成的值。

总结来说，loadAvatar()函数用于加载用户的头像。它从localStorage中获取头像索引，如果不存在则生成一个随机索引，并将该索引赋值给this.avatarIdx变量。

 

项目头像图片如上

一开始是打算用矢量图的

矢量图一般在阿里巴巴iconfont

矢量图介绍：

矢量图是一种图形设计中常用的图像类型，与我们日常见到的光栅图像（如JPEG、PNG等）有本质的区别。矢量图基于数学方程和几何元素（如点、线、曲线和形状）来表示图像，而不是像光栅图那样通过像素阵列来表示。这种特性赋予了矢量图一系列独特的优势和应用场景。

矢量图的格式
矢量图像常见的格式包括：

SVG (Scalable Vector Graphics)：用于网页的XML格式矢量图形。
AI (Adobe Illustrator)：Adobe Illustrator的专用格式。
EPS (Encapsulated PostScript)：广泛用于印刷行业的一种格式。
PDF (Portable Document Format)：虽然PDF通常用于文档，但它也可以包含矢量图形。
CDR (CorelDRAW)：CorelDRAW的专用格式。

优点
无损缩放：可以无限放大而不失真。
文件大小较小：对于简单图形，矢量图文件通常比光栅图像小。
易于编辑：可以轻松修改颜色、形状和布局。
缺点
不适合复杂图像：如具有大量颜色和细节的照片，矢量图可能不是最佳选择。
编辑和创建需要专业软件：如Adobe Illustrator或CorelDRAW。
渲染时间：复杂的矢量图可能需要更多的计算，导致渲染时间较长。
总之，矢量图因其无损缩放和编辑灵活性而在设计和印刷行业中非常受欢迎。尽管它们在处理高度复杂图像时有局限性，但在很多情况下，特别是在需要高清晰度输出的情况下，矢量图是最佳选择。

但是最后考虑到复杂度和清晰度，，，    直接存几张头像图并不难，就放弃了矢量图当头像的想法