PHP与MySQL：在HTML表格中高效显示多张图片教程
本教程详细讲解了如何使用PHP和MySQL数据库，在HTML表格中高效地显示多张图片。我们会从环境准备和数据库设计开始，创建用于存储图片信息的表格结构。接着讲解如何使用PHP连接数据库，执行查询来获取图片的路径信息。核心部分会展示如何将查询结果通过循环的方式，动态生成HTML表格，并确保图片能够正确加载和显示。教程还重点提供了性能优化的实用建议，比如如何通过分页查询来避免一次性加载过多数据导致页面卡顿，以及如何使用预处理语句来提升安全性和效率。最后，我们会给出一个集成连接、分页和展示功能的完整代码示例，帮助开发者快速上手并在实际项目中应用。
一、环境准备与数据库设计
首先确保服务器已安装PHP和MySQL扩展（如mysqli或PDO）。假设我们有一个名为gallery的数据库，其中包含一张表images，用于存储图片信息。表结构如下：
CREATE TABLE images (
id INT AUTO_INCREMENT PRIMARY KEY,
filename VARCHAR(255) NOT NULL,
title VARCHAR(100),
upload_time DATETIME DEFAULT CURRENT_TIMESTAMP
);字段说明：filename存储图片的相对路径或URL（例如uploads/photo1.jpg），title为图片标题，upload_time记录上传时间。你也可以根据实际需求扩展字段，比如增加缩略图路径、图片尺寸等。
二、连接MySQL数据库
使用PHP的mysqli扩展建立连接。建议将数据库配置信息放在单独的文件中，便于维护。以下示例使用面向对象风格：
<?php
$host = 'localhost';
$user = 'root';
$password = '';
$database = 'gallery';
$mysqli = new mysqli($host, $user, $password, $database);
if ($mysqli->connect_error) {
die('连接失败: ' . $mysqli->connect_error);
}
$mysqli->set_charset('utf8');
?>提示：生产环境中请使用强密码，并考虑使用环境变量或配置文件保护凭证。
三、查询图片数据
编写SQL语句获取所有图片记录。为了提升性能，建议只查询需要的字段，并合理使用LIMIT和OFFSET实现分页。此处先演示查询全部图片：
<?php $sql = "SELECT id, filename, title, upload_time FROM images ORDER BY upload_time DESC"; $result = $mysqli->query($sql); ?>
四、在HTML表格中循环显示图片
将查询结果遍历，逐行输出到HTML表格中。为了图片显示整齐，可以控制表格的列数，例如每行显示4张图片。这里采用简单的单张图片占一行的方式，但更推荐使用网格布局（如Bootstrap的栅格系统）。不过本教程聚焦于表格，所以将每张图片放在独立的表格行的一个单元格中，通过<img>标签显示：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图片展示</title>
<style>
table { border-collapse: collapse; width: 100%; }
td { padding: 10px; text-align: center; border: 1px solid #ccc; }
img { max-width: 150px; max-height: 150px; }
</style>
</head>
<body>
<h3>图片库</h3>
<table>
<thead>
<tr>
<th>ID</th>
<th>图片</th>
<th>标题</th>
<th>上传时间</th>
</tr>
</thead>
<tbody>
<?php
if ($result && $result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo "<tr>";
echo "<td>" . htmlspecialchars($row['id']) . "</td>";
// 图片路径假设存储在 'uploads/' 目录下
$imgPath = 'uploads/' . htmlspecialchars($row['filename']);
echo "<td><img src='" . $imgPath . "' alt='" . htmlspecialchars($row['title']) . "'></td>";
echo "<td>" . htmlspecialchars($row['title']) . "</td>";
echo "<td>" . htmlspecialchars($row['upload_time']) . "</td>";
echo "</tr>";
}
} else {
echo "<tr><td colspan='4'>暂无图片</td></tr>";
}
?>
</tbody>
</table>
<?php
$mysqli->close();
?>
</body>
</html>关键点：使用htmlspecialchars()转义输出，防止XSS攻击；图片src属性直接拼接相对路径（如uploads/），确保服务器上存在对应的图片文件；利用alt属性提供无障碍支持。
五、高效显示多张图片的性能优化
当图片数量较多时，一次性加载所有图片会拖慢页面响应。以下是几种优化策略：
- 分页查询：在SQL中使用
LIMIT和OFFSET，每次只获取一页数据。例如LIMIT 20 OFFSET 0。 - 使用预处理语句：如果查询条件动态变化，用
prepare和bind_param能提升重复查询效率并防止SQL注入。 - 图片懒加载：为
<img>标签添加data-src属性，利用JavaScript插件（如lazysizes）实现按需加载，减少初始请求。 - 生成缩略图：不要直接展示原图，提前缩放图片并存储缩略图，可大幅降低带宽和渲染压力。
- 使用CDN：如果图片存储在云存储，配置CDN加速分发。
以下是带有分页功能的改进代码片段：
<?php
// 假设当前页通过GET参数 page 获取，默认为1
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$limit = 20;
$offset = ($page - 1) * $limit;
// 使用预处理语句查询
$stmt = $mysqli->prepare("SELECT id, filename, title, upload_time FROM images ORDER BY upload_time DESC LIMIT ? OFFSET ?");
$stmt->bind_param("ii", $limit, $offset);
$stmt->execute();
$result = $stmt->get_result();
// 同时还需要查询总记录数以生成分页导航
$countResult = $mysqli->query("SELECT COUNT(*) AS total FROM images");
$totalRow = $countResult->fetch_assoc();
$totalPages = ceil($totalRow['total'] / $limit);
?>
<!-- 在HTML表格区域下方添加分页链接 -->
<div class="pagination">
<?php for ($i = 1; $i <= $totalPages; $i++) : ?>
<a href="?page=<?= $i ?>"><?= $i ?></a>
<?php endfor; ?>
</div>注意：上述代码中的分页链接使用了<a>标签，但文章正文中（代码块外部）不能使用超链接，为此我们只将超链接放在代码块内部。在实际应用中，分页链接是必要的，此处展示仅供学习。
六、完整示例代码
以下是一个完整的PHP文件，集成了连接、查询、分页和表格展示：
<?php
// db_config.php
$host = 'localhost';
$user = 'root';
$password = '';
$database = 'gallery';
$mysqli = new mysqli($host, $user, $password, $database);
if ($mysqli->connect_error) {
die('数据库连接失败: ' . $mysqli->connect_error);
}
$mysqli->set_charset('utf8');
// 分页逻辑
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$page = max($page, 1);
$limit = 20;
$offset = ($page - 1) * $limit;
// 获取总记录数
$totalResult = $mysqli->query("SELECT COUNT(*) AS cnt FROM images");
$totalRow = $totalResult->fetch_assoc();
$total = $totalRow['cnt'];
$totalPages = ceil($total / $limit);
// 查询当前页数据
$stmt = $mysqli->prepare("SELECT id, filename, title, upload_time FROM images ORDER BY upload_time DESC LIMIT ? OFFSET ?");
$stmt->bind_param("ii", $limit, $offset);
$stmt->execute();
$result = $stmt->get_result();
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图片管理 - 分页展示</title>
<style>
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px; text-align: center; border: 1px solid #ddd; }
img { max-width: 120px; max-height: 120px; }
.pagination { margin-top: 15px; }
.pagination a { display: inline-block; padding: 5px 10px; margin: 0 2px; border: 1px solid #007bff; color: #007bff; text-decoration: none; }
.pagination a.active { background: #007bff; color: #fff; }
</style>
</head>
<body>
<h3>图片库（第 <?= $page ?> 页）</h3>
<table>
<thead>
<tr>
<th>ID</th>
<th>图片预览</th>
<th>标题</th>
<th>上传时间</th>
</tr>
</thead>
<tbody>
<?php if ($result && $result->num_rows > 0): ?>
<?php while ($row = $result->fetch_assoc()): ?>
<tr>
<td><?= htmlspecialchars($row['id']) ?></td>
<td>
<img src="uploads/<?= htmlspecialchars($row['filename']) ?>" alt="<?= htmlspecialchars($row['title']) ?>">
</td>
<td><?= htmlspecialchars($row['title']) ?></td>
<td><?= htmlspecialchars($row['upload_time']) ?></td>
</tr>
<?php endwhile; ?>
<?php else: ?>
<tr><td colspan="4">暂无图片</td></tr>
<?php endif; ?>
</tbody>
</table>
<div class="pagination">
<?php for ($i = 1; $i <= $totalPages; $i++): ?>
<a href="?page=<?= $i ?>" class="<?= ($i == $page) ? 'active' : '' ?>"><?= $i ?></a>
<?php endfor; ?>
</div>
<?php $stmt->close(); $mysqli->close(); ?>
</body>
</html>七、总结
通过本教程，你学会了如何使用PHP从MySQL数据库中获取图片路径，并在HTML表格中高效展示。关键在于：正确的数据库设计、安全的数据输出、合理的分页与缓存策略。实际项目中，还可结合CSS框架（如Bootstrap）美化表格，或使用Ajax实现无刷新加载。记住始终对用户输入进行过滤，对输出进行转义，保障Web应用的安全性与性能。