Question

对于我网站的图像，我从sql表中获取它们。大多数图像都可以正常工作并按预期方式进行样式设置。但是，我标题背景的图像却不是，并且我无法弄清楚原因，因为其他图像都可以正常工作。

这是标题背景的代码，显示了我如何从sql表中获取图像：

<header class="background -display-container -grayscale-min" id="home">
        <?php
        try {
        $stmt = $db->query('SELECT image_title, image FROM images WHERE id= 1 ');
        while($row = $stmt->fetch()){
        echo "<img src='admin/uploads/".$row['image']."'";
        }
    }catch(PDOException $e) {
                echo $e->getMessage();
            }
?> 

  <div class="logan-display-left slogan" style="padding:48px">
    <span class="-jumbo -hide-small">Baking for you since '62</span><br>
    <p><a href="#about" class="-button -white -padding-large -large -margin-top -opacity -hover-opacity-off">Learn more</a></p>
  </div> 
</header>

这是应该遵循的css：

/* Full height image header */
.background {
  background-position: center;
  background-size: cover;
  min-height: 100%;
}

Answer 1

我认为这应该是这样：

<header class="background -display-container -grayscale-min" id="home" style="background-image: url(
        <?php
        try {
        $stmt = $db->query('SELECT image_title, image FROM images WHERE id= 1 ');
        while($row = $stmt->fetch()){
        echo "admin/uploads/".$row['image'];
        }
    }catch(PDOException $e) {
                echo $e->getMessage();
            }
?>">

因此，设置了<img> CSS属性，而不是生成background-image标签。然后您的background类会做剩下的事情。

更新。好吧，虽然我们正在讨论，但是这里有一些更好的代码版本，其中图像URL获取功能已提取到可重用函数中：

<?php
function imageUrl($id) use ($db)
{
    try {
        $stmt = $db->query('SELECT image FROM images WHERE id=  ' . (int)$id);
        $row = $stmt->fetch();
        return "admin/uploads/".$row['image'];
    } catch(PDOException $e) {
        // This way you at least will see error in your server logs, and probably in browser console:
        return $e->getMessage();
    }
}
?>
<header class="background -display-container -grayscale-min" id="home" style="background-image: url(<?= imageUrl(1) ?>;">

sql表中的图像不跟随css

1 个答案: