PHP/HTML从MySQL读取多张图片实现图片画廊问题排查

需要实现从MySQL数据库读取全部图片记录，在指定边框区域内渲染图片画廊的功能。现有代码仅在数据库仅存1条图片记录时可正常运行，无法正常展示多张图片，同时不确定foreach循环的使用方式是否正确。

你写的foreach循环用法本身没有问题，多图显示异常的核心原因有3个：

• 循环内的HTML标签闭合错位：图片外层的栅格div缩进、结构不规整，导致Bootstrap栅格布局规则失效
• 图片固定尺寸设置不合理：你给每张图片写死了width="990" height="360"，这个宽度远大于col-lg-3（大屏下单列仅占页面25%宽度）的容器宽度，会导致图片溢出容器、互相堆叠遮挡，视觉上就像只显示了一张图
• 缺少异常和空值判断：没有做SQL执行失败的捕获，也没有数据库无图片时的提示逻辑，出问题时页面会直接空白

<div class="main-panel">        
    <div class="content-wrapper">
      <div class="row">
        <div class="col-lg-12 grid-margin">
          <div class="card">
            <div class="card-body">
              <h4 class="card-title">图片画廊</h4>
              <div class="row icons-list">
              <?php
                $conn = new mysqli($servername, $username, $password, $dbname);
                if ($conn->connect_error) {
                    die("数据库连接失败: " . $conn->connect_error);
                }
                
                $sql = "SELECT * FROM images";
                $result = $conn->query($sql);
                
                // 判空和异常捕获
                if (!$result) {
                    echo "<div class='col-12'><p class='text-danger'>图片查询失败：" . $conn->error . "</p></div>";
                } elseif ($result->num_rows == 0) {
                    echo "<div class='col-12'><p>暂无上传的图片</p></div>";
                } else {
                    $theResult = $result->fetch_all(MYSQLI_ASSOC);
                    // foreach遍历结果集是完全合适的写法
                    foreach ($theResult as $picture):
                ?>
                    <!-- 修正标签结构，保证栅格类正确包裹每张图片 -->
                    <div class="col-sm-6 col-md-4 col-lg-3 gallery-item">
                        <!-- 移除固定宽高，通过CSS适配容器 -->
                        <img src="<?=$picture["image"]?>" class="img-fluid gallery-img" alt="画廊图片">
                    </div>
                <?php 
                    endforeach;
                }
                // 用完关闭数据库连接
                $conn->close();
                ?>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>

.gallery-item {
    padding: 10px;
}
.gallery-img {
    width: 100%;
    height: 240px;
    object-fit: cover; /* 保证图片不变形，自动裁剪填满容器 */
    border: 1px solid #eee;
    border-radius: 4px;
}

• 用foreach遍历fetch_all()取出的关联数组结果集是完全合理的写法，不需要替换成其他循环方式
• 不要给<img>标签写死远大于父容器的固定宽高，结合Bootstrap自带的img-fluid类和自定义CSS控制尺寸适配栅格，才能保证多图排列时布局不混乱
• 数据库操作一定要加异常判断、空数据提示，避免页面出现无提示的空白问题

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