PHP显示MySQL含BLOB图片的全表数据及布局调整问题

在PHP中展示MySQL的noticias表（含LONGBLOB类型的imagen字段）数据时，仅能显示最后一条插入的记录，且所有记录内容都塞在单个grid-item容器里。需求是展示所有记录及对应图片，新增记录能正常显示，且每条记录对应独立的grid-item。

MySQL表结构：

noticias: idNoticia(PK), idUser(FK), titulo, imagen(LONGBLOB), texto, fecha

问题根源 #

1. mostrarNoticias.php：循环查询结果时，用单个变量反复覆盖之前的值，最终仅保留最后一条记录的数据。
2. adminNoticias.php：仅渲染了一次grid-item容器，所有记录内容都被塞进同一个容器中。

解决方案 #

1. 修改mostrarNoticias.php：存储所有记录到数组 #

将单个变量改为数组，循环时把每条记录存入数组：

include('./DB.php');
session_start();

// 初始化数组存储所有新闻记录
$noticias = [];

$conexion = DB::conn();
$sentencia = 'SELECT * FROM noticias';
$consulta = $conexion->prepare($sentencia);
$consulta->execute();

// 循环将每条记录添加到数组
while ($row = $consulta->fetch(PDO::FETCH_ASSOC)) {
    $noticias[] = $row;
}

$consulta->closeCursor();
$conexion = null;

2. 修改adminNoticias.php：循环渲染独立grid-item #

遍历$noticias数组，为每条记录生成单独的grid-item容器：

<?php
include('./mostrarNoticias.php');
?>

<form class="form" action="./insertarNoticias.php" method="post" id="crear-noticia" enctype="multipart/form-data">
    <div class="form-label">
        <input type="file" name="imagen" class="form-control mb-3" id="imagen-noticia" required>
        <input type="text" class="form-control mb-3" name="titulo-noticia" id="titulo-noticia" placeholder="Título noticia" required>
        <input type="text" class="form-control mb-3" name="texto-noticia" id="texto-noticia" placeholder="Texto noticia" required>
        <input type="date" class="form-control mb-3" name="fecha-noticia" id="fecha-noticia" required>
    </div>
    <button type="submit" class="btn btn-success col-12 text-center">
        Crear noticia
    </button>
</form>

<div class="grid-container pt-4" id="ver-noticias">
    <?php
    // 遍历所有新闻，生成独立的grid-item
    foreach ($noticias as $noticia) {
        echo '<div class="grid-item">';
        echo "<h4>{$noticia['titulo']}</h4>";
        echo "<p>{$noticia['texto']}</p>";
        echo "<p>{$noticia['fecha']}</p>";
        // 提示：若图片为JPG等其他格式，需将data:image/png改为对应类型（如image/jpeg）
        echo "<img width='300' height='160' src='data:image/png; base64," . base64_encode($noticia['imagen']) . "'>";
        echo '</div>';
    }
    ?>
</div>

可选优化（插入后立即显示新记录） #

在insertarNoticias.php的$consulta->execute();之后添加跳转代码，确保插入成功后返回列表页：

header('Location: adminNoticias.php');
exit;

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