如何在PHP实现的用户点赞排行榜中替换用户名展示为圆形用户头像

核心修改逻辑 #

• 补全SQL查询字段：原有查询仅拉取username、likes，需将用户表中存储头像路径的字段加入SELECT列表
• 替换原用户名单元格内容：用pro_usrs_container类的div包裹头像标签，头像src取存储的路径，alt取对应用户名
• 采用HTML与PHP交替输出的写法，避免原来字符串拼接时的引号嵌套混乱问题

完整修改后代码 #

<table>
    <tr>
        <td></td>
        <td>Name</td>
        <td>Likes</td>
    </tr>

<?php
    $con=mysqli_connect("localhost", "user", "pass", "database");
    // 替换 avater 为你数据库中实际存储头像路径的字段名
    $sql = "SELECT username, likes, avater FROM users ORDER BY likes DESC LIMIT 5";
    $result = mysqli_query($con, $sql);
    $rank = 1;

    if (mysqli_num_rows($result)) {
        while ($row = mysqli_fetch_assoc($result)) {
?>
    <tr>
        <td><?= $rank ?></td>
        <td>
            <div class="pro_usrs_container">
                <img 
                    src="<?= htmlspecialchars($row['avater']) ?>" 
                    alt="<?= htmlspecialchars($row['username']) ?>" 
                />
            </div>
        </td>
        <td><?= $row['likes'] ?></td>
    </tr>
<?php
            $rank++;
        }
    }
?>
</table>

补充说明 #

• 代码使用短输出标签<?= ?>简化PHP输出写法，如果你的PHP环境禁用了短标签，可以改回字符串拼接形式
• 加入htmlspecialchars对输出内容做转义，避免用户自定义的用户名、头像路径包含特殊字符时出现渲染异常或XSS风险
• 如果你的数据库中头像字段为正确拼写的avatar，记得同步修改SQL查询和取值时的字段名

内容的提问来源于stack exchange，提问作者Onica Cosmin