如何使用 PHP 和 mysql 水平显示图像？答案

【问题标题】：How can i display images horizontally using PHP and mysql?如何使用 PHP 和 mysql 水平显示图像？
【发布时间】：2020-12-16 23:51:44
【问题描述】：

我正在尝试从 mysql 中的数据库中获取图像，然后以 3 行等水平显示它们，我还希望在图像顶部显示相关图像。我不知道该怎么做。这是我的主 div 中的代码。

<div class="container" id="content">
    <!-- Example row of columns -->
    <div class="row">
        <div class="col-md-4">
               <?php do { ?>              

            <a href="missions.php?missions_id=<?php echo $rsMissions['missions_id']; ?>">
            <img src="<?php echo $rsMissions['missions_image']; ?>" width="500px" height="350px" >
            <p><?php echo $rsMissions['missions_name']; ?></p>
            </a>

<?php } while ($rsMissions = mysqli_fetch_assoc($missions_query)) ?>
</div>
</div>

这是我的 php 查询，我认为这很好。

<?php
  require_once('includes/dbconn.php');
  $missions_sql = "SELECT missions_id, missions_name, missions_image FROM missions";
$missions_query = mysqli_query($dbconn, $missions_sql) or die(mysqli_error());
$rsMissions = mysqli_fetch_assoc($missions_query);

?>

这是我的 相关 div 的 css

.row{
  width: 1360px;  
}

.container{
width: 1360px;    
}

.col-md-4 img {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
          padding: 2px;
          position: relative;
}

.col-md-4 img:hover {
  -webkit-filter: blur(2px);
   -moz-filter: blur(2px);
    -o-filter: blur(2px);
      -ms-filter: blur(2px);
          filter: blur(2px);    
}

.col-md-4 p{

    -webkit-transition: all 0.9s;
  -moz-transition: all 0.9s;
  -ms-transition: all 0.9s;
  -o-transition: all 0.9s;
  transition: all 0.9s;
  visibility: hidden;
  position: absolute;

  top: 175px;
  left: 60px;
  text-decoration: none;
  font-size: 60px;
  opacity: 0;
  color: #fff;
  font-family: 'Raleway';   
}

.col-md-4:hover p{
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 0.9s;
  -moz-transition: all 0.9s;
  -ms-transition: all 0.9s;
  -o-transition: all 0.9s;
  transition: all 0.9s;    
}

【问题讨论】：

使用小提琴或将有关您的输出的屏幕截图发送给我们。

标签： php html mysql css

【解决方案1】：

你必须把循环放在 col-md-4 类之前。否则 div 不会重复。您无法水平获取图像。试试下面的代码，它会适合您。

<div class="container" id="content">
<!-- Example row of columns -->
<div class="row">
  <?php do { ?>
    <div class="col-md-4">
        <a href="missions.php?missions_id=<?php echo $rsMissions['missions_id']; ?>">
        <img src="<?php echo $rsMissions['missions_image']; ?>" width="500px" height="350px" >
        <p><?php echo $rsMissions['missions_name']; ?></p>
        </a>
    </div>
 <?php } while ($rsMissions = mysqli_fetch_assoc($missions_query)) ?>

【讨论】：

【解决方案2】：

我认为您将代码放在错误的位置。如果可行，请尝试像下面的代码一样更改它。

<div class="container" id="content">
    <!-- Example row of columns -->
    <div class="row">
      <?php do { ?>
        <div class="col-md-4">
            <a href="missions.php?missions_id=<?php echo $rsMissions['missions_id']; ?>">
            <img src="<?php echo $rsMissions['missions_image']; ?>" width="500px" height="350px" >
            <p><?php echo $rsMissions['missions_name']; ?></p>
            </a>
        </div>
     <?php } while ($rsMissions = mysqli_fetch_assoc($missions_query)) ?>
</div>

【讨论】：

【解决方案3】：

<?php
$servername = 'localhost';
$username = 'root';
$password = '';
$dbname = 'ledp';

//create connection
$conn = new mysqli($servername,$username,$password,$dbname);

//check connection
if($conn->connect_error) {
    die ('Error: Failed to connect database'.$conn->connect_error);
}

if(isset($_POST['submit5'])) {
    $pro_image = $_FILES['pro_image'];
    
    $tmp = $_FILES['pro_image']['tmp_name'];
    $name = $_FILES['pro_image']['name'];

    move_uploaded_file($tmp,'upload/'.time().$name);

    if($name = '') {
        echo 'Image upload failed';
    } else {
        echo 'Image uploaded';
    }
}


$files = glob('upload/*.*');
//loop
$i;
for($i=0;$i<count($files);$i++){
    $image = $files[$i];
    echo basename($image);
    echo '<div class="container-fluid">';
        echo '<div class="row">';
            echo '<div class="col-3 d-flex">';
                echo '<img class="img-fluid" src="'.$image.'" alt="" width = 300px>'.'<br><br>';
            echo '</div>';
        echo '</div>';
    echo '</div>';
};
 
echo "<h2>Total images: $i </h2>";

$conn->close();

?>

【讨论】：