众所周知,博客头像获取主要依据就是QQ或者QQ邮箱,评论区如果是非QQ邮箱就会头像加载失败,虽然有头像源,但还是不好看。
下面给出非常简单的代码,思路都是加载失败时替换原图片,一行代码就搞定,而且你也可以配合我之前发过的一篇自己搭建图片接口的文章来实现随机替换,相当于有了自己的头像源

onerror 事件

<img src="错误的图片地址" onerror="this.src='https://example.com/指定的图片地址.jpg'">
</body>
</html>

当图片加载失败时,会触发onerror事件, this.src 会将图片的 src 属性重新设置为指定的图片地址,从而实现图片加载失败时的替换。

实例

原评论区头像代码

//写的有点乱哈
<?php $email=$comments->mail; $imgUrl = getGravatar($email);echo '<img src="'.$imgUrl.'" width="45px" height="45px" style="border-radius: 50%;" >'; ?>

优化后

<?php
$email = $comments->mail;
$imgUrl = getGravatar($email);
// 构建img标签,添加onerror事件处理
$imgTag = '<img src="'.$imgUrl.'" width="45px" height="45px" style="border-radius: 50%;" onerror="this.src=\'default.jpg\';">';
echo $imgTag;
?>

//当然你也可以用外链:

<?php
$email = $comments->mail;
$imgUrl = getGravatar($email);
// 构建img标签,添加onerror事件处理,这里使用外链图片作为加载失败的替换
$imgTag = '<img src="'.$imgUrl.'" width="45px" height="45px" style="border-radius: 50%;" onerror="this.src=\'https://example.com/default.jpg\';">';
echo $imgTag;
?>

注意

在上述代码中,反斜杠\用于转义双引号"

在PHP中,当需要在双引号包围的字符串中使用双引号时,就需要用反斜杠进行转义,以告诉PHP解释器这个双引号是字符串内容的一部分,而不是字符串的结束标志。