接口链接：http://121.196.166.173/img/img.php 展示 demo：http://121.196.166.173/img 前言 为了写博客以及其他的一些用途，我使用服务器搭建了一个连接 github 仓库的上传网页，并且在数据库中记录上传的信息，比如缩略名、时间戳和图片链接。分别对应 GitHub 仓库中的图片，但是后期我发现在 GitHub 查看图片非常别扭，因此我打算写一个可展示图片的网页，把 GitHub 仓库中的图片通过链接展示出来，当然我们不可能一张张复制，还好有数据库。 看一下具体内容 写一个接口 很好，拥有我们需要的字段。事不宜迟，直接开动，下面是完成的接口代码。 <?php header('Content-Type:application/json; charset=utf-8'); header("Access-Control-Allow-Origin:*"); $servername = "localhost"; $username = "imgbed"; $password = "imgbed"; $dbname = "imgbed"; // 创建连接 $conn = new mysqli($servername, $username, $password, $dbname); // 检测连接 if ($conn->connect_error) { die("连接失败：" . $conn->connect_error); } // imgmd5 名称转 md5 // imguploadtime 上传时间戳 // imgurl 链接 // 上传 ip $sql = "select imgmd5,imguploadtime,imgurl,imguploadip from remote_imgs "; $result = $conn->query($sql); if ($result->num_rows > 0) { // 输出数据 while($row = $result->fetch_assoc()) { $data[]=$row; } $json = json_encode($data,JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT);//把数据转换为 JSON 数据。 exit($json) ; } else { echo "未查询到结果！"; } $conn->close(); ?> 分别将缩略名，时间戳，图片链接，和上传 ip 通过 json 格式导出，非常完美。接口链接：http://121.196.166.173/img/img.php 使用 ajax 进行调用 然后只需要在前端将接口调用，然后简单写一个页面即可，下面是 html 代码，，通过 ajax 调用。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图床</title> <style> .container { max-width: 1000px; margin: 40px auto; display: flex; flex-wrap: wrap; justify-content: space-between; } .item { width:300px; /* height: 300px; */ overflow: hidden; border: 2px solid #bbb; margin-bottom: 24px; } .item a{ display: block; width: 300px; /* height: 300px; */ overflow: hidden; } .item img{ max-width: 300px; max-height: 300px; } </style> </head> <body> <div class="container"></div> <script src="https://cdn.zburu.com/list/jquery3.6.0.js"></script> <script> var str = ''; $.ajax({ url: 'http://121.196.166.173/img/img.php', type: 'get', dataType: 'json', async: false, success: function (data) { $.each(data, function (i, item) { console.log(item) list = "<div class='item'><p>缩略名：" + item.imgmd5 + "</p>" + "<p>时间戳：" + item.imguploadtime + "</p>" + "<a target='_blank' href='"+ item.imgurl +"'><img src='" + item.imgurl + "'></a>" + "<p>上传 ip：" + item.imguploadip + "</p></div>" str += list; }), $(".container").html(str); console.log('数据请求成功') }, error: function () { console.log('数据请求失败') } }); </script> </body> </html> 最后我把这个页面传到我的服务器当中，可以看一下效果 http://121.196.166.173/img 时间仓促，我也没使用更好的 ui 进行优化，只是大致写一下这个过程，待到以后具体使用时，我会对这个展示图片的页面进一步优化。