如何使用PHP+JSON实现图片自动加载 解决数据库图片不显示问题

核心问题排查 #

• 语法错误：jQuery选择器$("#Imageslider"")多了一个冗余双引号，会直接抛出JS语法错误，代码无法正常执行。
• 标签拼接错误：生成img标签时缺少src属性，浏览器无法识别图片资源地址，自然无法渲染。
• 逻辑冗余错误：你定义了两个递归定时器逻辑，done()中调用的updates()函数不存在，同时和update_content()内部的定时器重复，会导致请求重复触发。

修正方案 #

后端PHP代码优化（可选，避免转义问题）

如果你的数据库中存储的是Base64编码的图片内容，修改输出JSON的代码，避免特殊字符被转义：

<?php 
include_once('db.php');
$sql = "SELECT * FROM images";
$res = mysqli_query($conn, $sql);
$result = [];
while($row = mysqli_fetch_array($res)) {
    array_push($result, ['image1' => $row['image1']]);
}
// 新增JSON_UNESCAPED_UNICODE参数避免转义
echo json_encode(["result" => $result], JSON_UNESCAPED_UNICODE);
?>

前端JS代码修正

先删掉无用的done()相关逻辑，再根据你数据库存储的内容选择对应方案：

情况A：数据库image1字段存储的是图片路径（如/static/xxx.jpg、https://xxx.com/xxx.png）

$(document).ready(function () {
    update_content();
});     

function update_content() {
  $.getJSON("showImages.php", function (data) {
    $("#Imageslider").empty();
    $.each(data.result, function () {
      // 补全src属性，修正选择器语法错误
      $("#Imageslider").append(`<img src="${this['image1']}" />`);
    });
    setTimeout(function () {
      update_content();
    }, 1000);
  });
}

情况B：数据库image1字段存储的是图片Base64编码内容

根据你的图片格式修改image/xxx部分即可，示例为jpeg格式：

$(document).ready(function () {
    update_content();
});     

function update_content() {
  $.getJSON("showImages.php", function (data) {
    $("#Imageslider").empty();
    $.each(data.result, function () {
      // 补充Base64前缀
      $("#Imageslider").append(`<img src="data:image/jpeg;base64,${this['image1']}" />`);
    });
    setTimeout(function () {
      update_content();
    }, 1000);
  });
}

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