MySQL存储PNG图片经PHP base64输出浏览器仅部分显示问题

问题现象 #

存储在MySQL数据库中的PNG图片，经PHP读取拼接base64输出到浏览器时无法完整渲染，仅显示部分内容，同查询返回的商品名称、价格等文本字段展示均正常。

现有实现代码 #

数据库查询代码（index.php） #

<?php
    include("connection.php");
    $sql = "SELECT prod_cost, prod_name, prod_image FROM products";
    $result = mysqli_query($con, $sql);

    $row = mysqli_fetch_all($result, MYSQLI_ASSOC);
    
    // 释放查询结果占用内存
    mysqli_free_result($result);

    // 关闭数据库连接
    mysqli_close($con);
?>

前端渲染代码 #

<div class="col-1" onclick="location.href='item1.html';" style="cursor: pointer;">
  <img src="data:image/ppg;charset=utf8;base64,<?php echo base64_encode($row[0]['prod_image'])?> " alt="Rooster Chicken #18">
  <h4><?php echo $row[0]['prod_name']; ?></h4>
  <p>$ <?php echo $row[0]['prod_cost']; ?>&nbsp;  <strike> $17.80 </strike></p>
</div>

图片入库代码 #

通过MySQL内置LOAD_FILE()函数直接读取本地PNG文件写入products表：

INSERT INTO products(prod_name, prod_stock,prod_cost,prod_image)
VALUES ('Rooster Chicken #18',100,17.65,LOAD_FILE('C:/xampp/htdocs/SNS/Images/products/rooster18.png'));

故障原因 #

• 核心原因：存储图片的数据库字段类型长度不足，写入时二进制数据被截断。如果prod_image字段使用的是默认BLOB类型，单字段最大仅能存储64KB数据，超过容量的图片内容会被直接丢弃，最终base64编码输出的是不完整的图片数据，渲染时自然只能显示部分内容。
• 附带笔误：前端img标签的data URI中MIME类型书写错误，image/ppg为无效值，正确PNG格式对应的MIME应为image/png；同时base64字符串末尾多余的空格也可能导致部分浏览器解析异常。

修复步骤 #

1. 修改图片字段存储类型
   执行如下SQL将prod_image字段改为MEDIUMBLOB类型（单字段最大支持16MB存储，足够覆盖普通商品展示图需求，如需存储更大尺寸图片可替换为LONGBLOB类型，最大支持4GB存储）：

ALTER TABLE products MODIFY COLUMN prod_image MEDIUMBLOB;

如果修改字段类型后仍存在数据截断问题，检查MySQL配置项max_allowed_packet，将值调整为16M及以上，修改后重启MySQL服务生效。

2. 修正前端渲染代码
   修正MIME类型笔误，去掉base64拼接位置的多余空格：

<div class="col-1" onclick="location.href='item1.html';" style="cursor: pointer;">
  <img src="data:image/png;base64,<?php echo base64_encode($row[0]['prod_image'])?>" alt="Rooster Chicken #18">
  <h4><?php echo $row[0]['prod_name']; ?></h4>
  <p>$ <?php echo $row[0]['prod_cost']; ?>&nbsp;  <strike> $17.80 </strike></p>
</div>

3. 重新执行图片入库SQL，将完整的PNG文件写入数据库，刷新页面即可正常展示完整图片。

优化建议：非特殊场景不建议将二进制图片文件直接存储在数据库中，将图片存储在本地磁盘/对象存储、数据库仅保存图片访问路径的方案，查询性能更高，也可避免字段长度限制、二进制传输截断类问题。

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