Laravel 6中如何在DataTable显示数据库Blob类型图片

一、修复DataTable JavaScript代码的语法错误 #

你的JS代码存在两处语法问题，会导致DataTable渲染失败：

1. orderable: false 被放在列配置对象外部，需移入对应列的配置中；
2. 图片标签存在多余引号，导致HTML语法错误。

修正后的JS代码：

columns: [
    { data: 'id', name: 'id' },
    { data: 'titulo', name: 'titulo' },
    { data: 'observacion', name: 'observacion' },
    { data: 'estado', name: 'estado' },
    { data: 'grabacion', name: 'grabacion' },
    // 图片列配置
    {
        data: 'lugar_imagen',
        name: 'lugar_imagen',
        render: function (data, type, row, meta) {
            var imgsrc = 'data:image/png;base64,' + data;
            return '<img class="img-responsive" src="' + imgsrc + '" height="100px" width="100px">';
        },
        orderable: false
    }
]

二、后端处理Blob数据为Base64编码 #

数据库中的Blob是原始二进制数据，需在Laravel控制器中转换为Base64字符串后返回给DataTable：

假设你的DataTable接口在ClientController的getData方法中，修改查询逻辑：

use App\Models\Client;
use Yajra\DataTables\Facades\DataTables;

public function getData()
{
    $clients = Client::select(['id', 'titulo', 'observacion', 'estado', 'grabacion', 'lugar_imagen'])->get();
    
    // 将Blob字段转换为Base64
    $clients->transform(function ($client) {
        $client->lugar_imagen = base64_encode($client->lugar_imagen);
        return $client;
    });
    
    return DataTables::of($clients)->make(true);
}

三、可选：动态匹配图片MIME类型 #

如果数据库中存储的图片格式不只是PNG，可在后端获取图片MIME类型，拼接正确的Data URI：

$clients->transform(function ($client) {
    $blobData = $client->lugar_imagen;
    // 获取图片MIME类型
    $mime = finfo_buffer(finfo_open(FILEINFO_MIME_TYPE), $blobData);
    // 拼接完整的Data URI
    $client->lugar_imagen = 'data:' . $mime . ';base64,' . base64_encode($blobData);
    return $client;
});

此时前端render函数可简化为：

render: function (data, type, row, meta) {
    return '<img class="img-responsive" src="' + data + '" height="100px" width="100px">';
}

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