PHP转换的Base64图片无法在HTML <img>标签中显示求助

Let's break down the issues here step by step—your problem comes from a few critical mistakes in how you're encoding the image content in PHP, which leads to invalid Base64 data being sent to the frontend.

核心错误点分析 #

• 你编码的是文件路径，不是图片内容：base64_encode($image) 把文件的路径字符串（比如C:/Temp/MgrReportUploads/20191108134339_jedi1.jpg）做了Base64编码，而不是读取图片文件的二进制数据再编码。浏览器拿到的是路径的编码，自然无法解析成图片。
• 文件后缀获取错误：pathinfo($path, PATHINFO_EXTENSION) 中$path是文件夹路径，不是单个图片文件，所以这个调用会返回空值（或错误的后缀）。你需要对每个找到的图片文件单独提取后缀。
• 多图片覆盖问题：循环里每次都直接赋值$vals['encodedImages']，如果找到多个图片，最终只会保留最后一张的结果，应该用数组存储所有图片。

修正后的PHP代码 #

$imageDate = date_format($currentdate, 'YmdHis');
$path = 'C:/Temp/MgrReportUploads';
$files = glob($path. '/'.$imageDate. '_*');
$vals['encodedImages'] = []; // 改为数组存储多图

if (!empty($files)) {
    foreach($files as $image) {
        // 获取单个文件的后缀
        $type = pathinfo($image, PATHINFO_EXTENSION);
        // 读取图片二进制内容再编码
        $imageContent = file_get_contents($image);
        if ($imageContent!== false) {
            $vals['encodedImages'][] = 'data:image/'.$type. ';base64,'.base64_encode($imageContent);
        }
    }
}
echo json_encode($vals);

对应JS代码调整（适配多图场景） #

如果需要展示所有匹配的图片，修改JS代码如下：

onSuccess: function(data) {
    var imgList = document.querySelector('#imageLst'); // 目标div
    // 遍历所有编码后的图片
    data.encodedImages.forEach(function(imgSrc) {
        var img = document.createElement("img");
        img.setAttribute("src", imgSrc);
        // 可以添加样式避免图片过大
        img.style.maxWidth = "100%";
        imgList.append(img);
    });
}

额外验证步骤 #

1. 先单独访问你的PHP接口，检查返回的Base64字符串：可以把返回的data:image/xxx;base64,...字符串复制到浏览器地址栏，看是否能直接显示图片，如果不能，说明PHP编码仍有问题。
2. 确认file_get_contents有读取文件的权限，避免因权限问题无法获取图片内容。

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