利用 onerror 事件使 Gravatar 在源不可用时自动切换头像源

前些天，有小伙伴反映说，站点的头像变成碎图了...今天找了下时间，解决了这个问题。

本方案的原理，就是使用了onerror事件的调用，来检测头像加载过程中是否出错，如果出错，就执行 Javascript 逻辑。目前整理好的代码如下所示。

const avatarOnError = (node) => {
    // nowURL：（例）https://cravatar.cn/avatar/8229a0ed4a6cbc6f3d618f76f8d028a3
    const nowURL = node.src;
    // 如果默认的 cravatar 无法访问了，就使用 weavatar 作为备份
    if (nowURL.split('/')[2] == 'cravatar.cn') {
        node.src = 'https://weavatar.com/avatar/' + nowURL.split('/')[4];
    // 如果第一备选 weavatar 也无法访问了，就使用 loli 源作为备份
    } else if (nowURL.split('/')[2] == 'weavatar.com') {
        node.src = 'https://gravatar.loli.net/avatar/' + nowURL.split('/')[4];
    // 如果第二备选 loli 源也无法访问了，就使用官方源作为备份
    } else if (nowURL.split('/')[2] == 'gravatar.loli.net') {
        node.src = 'https://secure.gravatar.com/avatar/' + nowURL.split('/')[4];
    // 都不行了，加载个碎图占位图
    } else {
        node.src = '这里一定要写一个能百分之百能正常加载的图片的路径（最好是本站目录下的），防止进入死循环';
    }
}

调用的时候，直接写在img标签上就行，例子如下。

<img src="..." ... onerror="avatarOnError(this);">

因为就只是前端的东西嘛，除了 Typecho 能用之外，其他平台也都是可以用的。希望本方案可以给大家带来参考。