解决vue中的报错TypeError: Cannot read properties of undefined (reading ‘headPortrait‘)

报错信息

原因：

一般情况下数组中容易出现这种报错，根本原因是因为没有判断数组是否为空，就已经去用数组里面的变量了，所以导致报错。

我刚开始代码是

<img
   :src="avatar(rankingList3[1].headPortrait)"
    alt="排行榜"
/>

解决报错

 先判断这个数组是否为空数组之后，然后再进行赋值即可解决该报错

<img
    :src="rankingList3[0]&&avatar(rankingList3[0].headPortrait)"
    alt="排行榜"
/>

或者

 <img
    v-if='rankingList3[0]'
    :src="avatar(rankingList3[0].headPortrait)"
    alt="排行榜"
 />