Question

我有一个包含大量图像路径的数据库。我希望以下面提到的格式显示图像

        ------|--------|-------|------|
        image1| image2 | image3|image4|
        ------|--------|-------|------|  
        image5|image6  |image7 |image8|
        ------|--------|-------|------|
        image9|image10 | ......|      | 
        ------|--------|-------|------|

因为我是php新手，任何人都可以指导我如何显示如上所示的记录任何建议??

Answer 1

首先：

将图像（或一般文件）存储在数据库中被认为是不好的做法。

你的数据库会在一段时间后咬你。性能损失，聚类，各种怪异。

如果您将图像存储在文件系统中并将文件路径放在数据库中，那会更好。从数据库中获取结果并使用<img>标记加载图像。

这样可以加快速度并保持数据库结构的清洁和可维护性

然后：

在将上述建议铭记于心之后，从数据库中获取图像路径并让php在foreach循环中为您创建一些div或ul标记：

<?php
// Create a database connection
$db = [YOUR DB CONNECTION];

// Use whatever query you've got; the LIMIT is optional but 
// good for performance as you'll surely need it sometime
$files = $db->query('SELECT id, path FROM images ORDER BY path ASC LIMIT 10');

// Loop through the $files (each representing an image)
$html = '';
foreach ($files as $img)
{
    // Assuming the db query returned an object, adapt for array otherwhise
    $html .= '<li><img src="'.$img->path.'" alt=""></li>';
}
?>

<!-- Now echo the desired grid -->
<div class="img-grid">
    <ul>
        <?php echo $html; ?>
    </ul>
</div>

CSS部分：

.img-grid {
    position: relative;
    width: [SET TO WHAT YOU NEED];
    margin: 0 auto; /* this centers the grid, but a fixed pixel width is required */
}

.img-grid ul {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
}

.img-grid ul > li {
    display: block;
    float: left;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* This moves the next 4 images to the next line (adjust to your needs).
   If you need cross browser support, consider another option as this is CSS3: */
.img-grid ul > li:nth-child(4n+4) {
    clear: right;
}

/* If you like the images to be fluid (responsible to the parent element): */
.img-grid li img {
    display: block;
    width: 100%;
    min-width: 100%;
    border: 0;
    ...
}

这是您想要实现的基本想法。试试这个，然后摆弄它，直到你得到理想的结果

阅读：

快乐的编码！

Answer 2

如果您只想提取数据并每4个图像使用一个新行，那么这很简单：

$images_from_db = array('image1.jpg','image2.jpg','image3.jpg','image4.jpg','image5.jpg','image6.jpg','image7.jpg','image8.jpg','image9.jpg','image10.jpg');

// create a counter
$counter = 0;

// loop through your images
foreach($images_from_db as $key=>$value){

    // increment the counter so we know how many images there are so far
    $counter++;

    // echo your images to the screen
    echo '<img src="'.$value.'">';

    // check if 4 images have gone by
    if($counter % 4 == 0){

        // echo a <br> and next image will start a new row
        echo '<br>';
    }
}

Answer 3

这一切都归结为HTML标记和CSS。你用PHP返回它，你需要设置样式。

显示图像的最简单方法可能是HTML Table，每个单元格都会保存图像。

显示数据库中的图像

3 个答案:

首先：

然后：

阅读：