如何用PHP从MySQL数据库生成数量不限的CSS div并插入图片

最近我在用PHP的while循环时发现，很少有内容讨论怎么从MySQL数据库生成数量不限的div并插入图片——就算有相关内容，操作步骤也不够简洁。所以我想分享下自己摸索出来的简单实现方法，希望能帮到有同样需求的人。

首先我创建了这样一个数据表，用来存储需要展示的内容：

CREATE TABLE items (
    ID INT PRIMARY KEY AUTO_INCREMENT,
    Name VARCHAR(255) NOT NULL, -- 图片对应的名称/标题
    Image VARCHAR(255) NOT NULL -- 存储图片的路径（相对或绝对）
);

接下来是核心的PHP实现代码，通过数据库查询+while循环动态生成div和图片：

<?php
// 数据库连接配置
$servername = "localhost";
$username = "your_db_username";
$password = "your_db_password";
$dbname = "your_database_name";

// 建立数据库连接
$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接是否成功
if ($conn->connect_error) {
    die("数据库连接失败: " . $conn->connect_error);
}

// 查询所有需要展示的记录
$sql = "SELECT ID, Name, Image FROM items";
$result = $conn->query($sql);

// 循环生成div元素
if ($result->num_rows > 0) {
    // 遍历每一条记录
    while($row = $result->fetch_assoc()) {
        // 输出带图片的div，用htmlspecialchars防止XSS
        echo '<div class="card">';
        echo '<h4>' . htmlspecialchars($row["Name"]) . '</h4>';
        echo '<img src="' . htmlspecialchars($row["Image"]) . '" alt="' . htmlspecialchars($row["Name"]) . '" width="200">';
        echo '</div>';
    }
} else {
    echo "<p>暂无可用内容</p>";
}

// 关闭数据库连接
$conn->close();
?>

一些实用小提示： #

• 一定要用htmlspecialchars()处理从数据库取出的内容，避免XSS安全问题
• Image字段建议存储相对路径（比如./assets/images/flower.jpg），这样迁移项目时更灵活
• 可以给div添加自定义CSS类（比如上面的card），方便后续用CSS美化样式

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