PHP输出猫咪信息表格仅首行图片显示其余行图片加载异常

我创建了用于展示猫咪信息的表格，需要在表格中展示每只猫咪的图片、名称、年龄、性别、描述信息，共计需要展示10条猫咪数据。当前运行出现异常：名称、年龄、性别、描述字段均可正常展示对应数据，仅表格第一行的图片可以正常显示，其余行的图片均无法加载展示，相关实现代码如下：

<?php
include("include/connection.php");
$query = "SELECT * FROM cat";
$result = mysqli_query($conn, $query);
?>
<form action="add_cat.php"><div align="right"><button class="btn btn-success mb-2">Add New Cat</button></div></form>
<div class="table-wrapper-scroll-y my-custom-scrollbar">
    <table class="table border border-dark" width="50%" cellpadding="5" cellspacing="5">
        <thead class="thead-secondary">
            <tr>
                <th scope="col">Num</th>
                <th scope="col">Cat ID</th>
                <th scope="col">Picture</th>
                <th scope="col">Name</th>
                <th scope="col">Age</th>
                <th scope="col">Gender</th>
                <th scope="col">Description</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
        <!-- fetched data from cat table -->
        <?php 
        $num =1;
        while($row = mysqli_fetch_assoc($result)) { ?>
            <tr>
                <td><?php echo $num; ?></td>
                <td><?php echo $row['id_cat']; ?></td>
                <td><?php echo "<img src= '", $row['picture'] ,"' width='175' height='100' />" ?> </td>
                <td><?php echo $row['name']; ?></td>
                <td><?php echo $row['age']; ?></td>
                <td><?php echo $row['gender']; ?></td>
                <td><?php echo $row['description']; ?></td>
                <td>
                    <a href="edit_cat.php"><button class="btn btn-primary">Edit</button></a>
                    <a href="delete_cat.php?id_cat=<?php echo $row['id_cat']; ?>"><button class="btn btn-danger">Delete</button></a>
                </td>
            </tr>
            <?php $num++;
            } ?>  
        </tbody>
    </table>
</div>
</form>

• HTML结构错乱：新增猫咪的表单只写了起始标签，没有在按钮后及时闭合，整个表格都被错误包裹在表单内，末尾又额外多写了一个</form>闭合标签，浏览器自动修正DOM结构时会打乱后续行的元素渲染逻辑。
• 图片属性转义缺失：输出图片路径时没有做特殊字符转义，如果除第一条外的图片路径包含单引号、空格等特殊字符，会直接截断src属性，导致图片地址失效。
• 标签嵌套违规：将<button>交互式标签嵌套在<a>标签内部，不符合HTML语法规范，部分浏览器渲染时会自动拆分标签，进一步破坏表格行的DOM结构。
• 附带功能bug：编辑按钮的跳转链接没有携带对应猫咪的ID参数，后续编辑功能无法定位到目标数据。

1. 修正表单闭合逻辑，新增猫咪的表单在按钮渲染完成后立即闭合，移除末尾多余的表单闭合标签。
2. 图片路径输出时使用htmlspecialchars()做转义处理，增加alt属性和加载失败兜底逻辑，避免路径异常时出现裂图。
3. 移除<a>标签内部嵌套的<button>，直接给<a>标签添加按钮样式类，符合HTML嵌套规范。
4. 给编辑按钮的跳转链接补充猫咪ID参数，保证编辑功能正常可用。
5. 逐一排查数据库中从第二条开始的picture字段值，确认存储的图片路径和服务器实际文件路径完全匹配，无拼写错误、多余空格、中文乱码问题。

修复后的完整代码如下：

<?php
include("include/connection.php");
$query = "SELECT * FROM cat";
$result = mysqli_query($conn, $query);
?>
<!-- 新增猫咪表单，及时闭合 -->
<form action="add_cat.php">
    <div align="right">
        <button type="submit" class="btn btn-success mb-2">Add New Cat</button>
    </div>
</form>
<div class="table-wrapper-scroll-y my-custom-scrollbar">
    <table class="table border border-dark" width="50%" cellpadding="5" cellspacing="5">
        <thead class="thead-secondary">
            <tr>
                <th scope="col">Num</th>
                <th scope="col">Cat ID</th>
                <th scope="col">Picture</th>
                <th scope="col">Name</th>
                <th scope="col">Age</th>
                <th scope="col">Gender</th>
                <th scope="col">Description</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
        <?php 
        $num = 1;
        while($row = mysqli_fetch_assoc($result)) { ?>
            <tr>
                <td><?php echo $num; ?></td>
                <td><?php echo $row['id_cat']; ?></td>
                <!-- 转义图片路径，增加兜底 -->
                <td>
                    <img 
                        src="<?php echo htmlspecialchars($row['picture']); ?>" 
                        width="175" 
                        height="100" 
                        alt="猫咪图片"
                        onerror="this.src='default_cat.png'"
                    />
                </td>
                <td><?php echo $row['name']; ?></td>
                <td><?php echo $row['age']; ?></td>
                <td><?php echo $row['gender']; ?></td>
                <td><?php echo $row['description']; ?></td>
                <td>
                    <!-- 直接给a标签加按钮样式，补充编辑参数 -->
                    <a href="edit_cat.php?id_cat=<?php echo $row['id_cat']; ?>" class="btn btn-primary">Edit</a>
                    <a 
                        href="delete_cat.php?id_cat=<?php echo $row['id_cat']; ?>" 
                        class="btn btn-danger"
                        onclick="return confirm('确认删除该猫咪信息？')"
                    >Delete</a>
                </td>
            </tr>
            <?php $num++;
        } ?>  
        </tbody>
    </table>
</div>

注：代码中default_cat.png为默认兜底图，你可以替换为自己项目中实际存在的默认图片路径。

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