如何通过JavaScript+PHP从MySQL的LongBlob字段显示图片

看起来你遇到的核心问题是LongBlob的二进制图片数据无法直接通过JSON传输并在前端渲染，因为JSON是纯文本格式，二进制数据需要先转成Base64编码才能被正确处理。另外你的JavaScript代码里还有语法错误，导致图片src为空。下面一步步帮你解决：

1. 修改PHP代码：将二进制图片转成Base64编码 #

你的PHP当前直接把查询结果转成JSON，但image字段是LongBlob二进制数据，JSON无法正确序列化它。我们需要遍历结果，把每个image字段转成Base64字符串：

<?php
include_once('pConfig.php');

$cID = filter_input(INPUT_GET, "cIDs") ?? null;
$ciCode = filter_input(INPUT_GET, "ciCodes") ?? null;

if (!$cID || !$ciCode) {
    echo json_encode(['error' => 'Missing parameters']);
    exit();
}

$stmt = $db->prepare("SELECT id, ci_ID, ciCode, Title, image FROM ci_images WHERE ci_ID = ? AND ciCode = ?");
$stmt->bind_param('is', $cID, $ciCode);
$stmt->execute();
$result = $stmt->get_result();

if (!$result) {
    printf("Error: %s\n", mysqli_error($db));
    exit();
}

$images = [];
while ($row = mysqli_fetch_assoc($result)) {
    // 将二进制图片转成Base64编码
    $row['image'] = base64_encode($row['image']);
    $images[] = $row;
}

echo json_encode($images);
?>

这里做了几个优化：

• 增加了参数校验，避免空值查询
• 显式指定查询字段（推荐做法，避免不必要的数据）
• 遍历结果行，把image字段转成Base64字符串后再存入数组，最后转成JSON

2. 修复JavaScript代码：渲染Base64图片并修正语法错误 #

你的JS代码里有两处语法错误（多余的+号），而且没有正确处理图片数据。修改后的代码如下：

function previewImages(cID) {
    var ciCode = window.localStorage.getItem('ciCode');
    var xdata = {'cIDs': cID, 'ciCodes': ciCode};

    $.ajax({
        type: 'GET',
        url: '../back_php_Code/pPrevImages.php',
        dataType: 'json',
        data: xdata,
        success: function (response) {
            // 清空容器，避免重复渲染
            $('#iSet').empty();
            
            if (response.length === 0) {
                $('#iSet').append('<p>No images found.</p>');
                return;
            }

            response.forEach(function(image) {
                // 构造data URI：格式为data:[图片类型];base64,[编码内容]
                // 这里假设图片是JPEG，如果是其他类型（PNG/GIF）需要调整
                var imageSrc = 'data:image/jpeg;base64,' + image.image;
                
                $('#iSet').append(`
                    <div class="col-lg-4 col-sm-6">
                        <div class="thumbnail">
                            <div class="thumb">
                                <a href="${imageSrc}" data-lightbox="9" data-title="${image.Title}">
                                    <img src="${imageSrc}" alt="${image.Title}" class="img-fluid img-thumbnail">
                                </a>
                            </div>
                        </div>
                    </div>
                `);
            });
        },
        error: function (error) {
            console.log('请求出错:', error);
            $('#iSet').append('<p>加载图片失败，请稍后重试。</p>');
        }
    });
}

关键修复点：

• 去掉了多余的eval(response)（dataType: 'json'已经自动解析成对象，不需要eval）
• 修复了data-title和src里的语法错误（多余的+号）
• 使用data:image/jpeg;base64,[Base64内容]作为图片的src，浏览器可以直接识别这个格式
• 增加了空数据处理和错误提示，提升用户体验
• 使用模板字符串（`）让HTML拼接更清晰易读

注意事项 #

• 图片类型：如果你的表中存储的是PNG或其他格式的图片，需要把data:image/jpeg改成对应的类型（比如data:image/png）。如果不确定图片类型，可以考虑在MySQL表中新增一个image_type字段存储MIME类型（比如image/jpeg），这样前端可以动态设置类型。
• 性能问题：Base64编码会让图片体积增加约30%，如果图片数量多或体积大，建议改用单独的PHP接口返回图片（比如getImage.php?id=1，在这个接口里直接输出二进制图片并设置正确的Content-Type头），这样更高效。

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