DataTables+PHP/AJAX场景下校验头像存在并显示占位图的实现方案咨询

两种实现方案，可根据你的业务场景选择 #

你提的两种处理逻辑都可行，以下是具体实现方式和适用场景说明： #

方案1：后端PHP预处理（推荐小数据量场景使用） #

优势是客户端不会产生多余的图片404请求，服务端直接返回最终可用的头像地址，前端无需额外处理，也不会在浏览器控制台留下异常请求日志。

修改fetch_data.php的遍历逻辑即可：

<?php
// db settings
$hostname = 'localhost';
$username = 'root';
$password = '';
$database = 'db_name';
// 服务器本地头像存储根目录，替换为你自己的实际路径
$avatar_root = $_SERVER['DOCUMENT_ROOT'] . '/assets/img/misc/small/avatar/';

// db connection
$con = mysqli_connect($hostname, $username, $password, $database) or die("Error " . mysqli_error($con));

// fetch records
$sql = "select id, first, last, phone, email, position, department, region, property_code, property, city, country from users2";
$result = mysqli_query($con, $sql);

while($row = mysqli_fetch_assoc($result)) {
    // 校验头像是否存在
    $target_avatar = $avatar_root . 'avatar-' . $row['id'] . '.jpg';
    if (file_exists($target_avatar)) {
        $row['avatar_url'] = '../../assets/img/misc/small/avatar/avatar-' . $row['id'] . '.jpg';
    } else {
        $row['avatar_url'] = '../../assets/img/misc/small/avatar/avatar_00.jpg';
    }
    $array[] = $row;
}

$dataset = array(
    "echo" => 1,
    "totalrecords" => count($array),
    "totaldisplayrecords" => count($array),
    "data" => $array
);

echo json_encode($dataset);

前端第一列的渲染逻辑直接用返回的avatar_url即可：

{
    data: 'id',
    render: function(data, type, row) {
        return '<div class="sidebar-comment-avatar"><a href="#"><img src="'+ row.avatar_url +'"></a></div>';
    }
}

方案2：前端直接处理（无需修改后端代码） #

直接利用img标签的onerror事件，图片加载失败时自动替换为占位图，实现成本最低，不用调整后端接口逻辑，适合数据量较大、接口需要复用的场景。

仅需要修改JS中第一列的render逻辑：

{
    data: 'id',
    render: function(data, type, row) {
        // 加this.onerror=null是为了防止默认图也加载失败时进入死循环
        return '<div class="sidebar-comment-avatar"><a href="#"><img src="../../assets/img/misc/small/avatar/avatar-' + row.id + '.jpg" onerror="this.onerror=null; this.src=\'../../assets/img/misc/small/avatar/avatar_00.jpg\'"></a></div>';
    }
}

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