如果图片不可用，则显示虚拟图片

Question

当图片未设置时，我试图显示来自- Font awesome- 的虚拟图片。 你可以看到我的代码，如果有，它会显示图像，但是当没有时，它需要从awesomefont 设置虚拟图片。尝试将此 <i class="fas fa-user-circle"></i> 粘贴到 else 中，但这不起作用。谁能帮帮我？

   <?php
      $onderrwerp = $app->get_onderwerpen();
      foreach($onderrwerp as $onderwerp){
        echo '<div class="well well-sm">';
            if(file_exists('assets/images/profielfotos/'.$onderwerp['klant_id'])) { 
                echo '<img class="img-circle" src="/assets/images/profielfotos/'.$onderwerp['klant_id'].'/'.$onderwerp['foto'].'" />';
            } else {
            }
            echo '<b><a href="https://tom.lbmedia.nl/reactie"> '.$onderwerp['onderwerpnaam'].'</b></a>'; 
            echo ' - ' . $onderwerp['voornaam'] . ' ' . $onderwerp['achternaam'];
            echo '</div>';
        }
    ?>

更新 这对我有用！我用font-size 稍微改变了它。我唯一的问题是它没有很好地对齐。正如您在图片上看到的，第一个图片旁边的文字很好，但第二个和 3e 有点但更低？如何解决？

<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
   <?php

      $onderrwerp = $app->get_onderwerpen();
      foreach($onderrwerp as $onderwerp){
        echo '<div class="well well-sm">';
            if(file_exists('assets/images/profielfotos/'.$onderwerp['klant_id'])) { 
                echo '<img class="img-circle" src="/assets/images/profielfotos/'.$onderwerp['klant_id'].'/'.$onderwerp['foto'].'" />';
            } else {
                echo '<i style="font-size: 2.5em;" class="fas fa-user-circle"></i>';
            }
            echo '<b><a href="https://tom.lbmedia.nl/reactie"> '.$onderwerp['onderwerpnaam'].'</b></a>'; 
            echo ' - ' . $onderwerp['voornaam'] . ' ' . $onderwerp['achternaam'];
            echo '</div>';
        }
    ?>

how it looks like now

Answer 1

您可能缺少所需的 js 文件，这就是它没有显示的原因。

Getting Started

试试：

<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
   <?php

      $onderrwerp = $app->get_onderwerpen();
      foreach($onderrwerp as $onderwerp){
        echo '<div class="well well-sm">';
            if(file_exists('assets/images/profielfotos/'.$onderwerp['klant_id'])) { 
                echo '<img class="img-circle" src="/assets/images/profielfotos/'.$onderwerp['klant_id'].'/'.$onderwerp['foto'].'" />';
            } else {
                echo '<i style="font-size: 6em;" class="fas fa-user-circle"></i>';
            }
            echo '<b><a href="https://tom.lbmedia.nl/reactie"> '.$onderwerp['onderwerpnaam'].'</b></a>'; 
            echo ' - ' . $onderwerp['voornaam'] . ' ' . $onderwerp['achternaam'];
            echo '</div>';
        }
    ?>

Answer 2

您可以将字体图标放在其他部分，它应该可以正常工作。 我认为您的 if 语句不允许您转到其他地方。只需像这样更新 if 条件：

$foto = '/assets/images/profielfotos/'.$onderwerp['klant_id'].'/'.$onderwerp['foto'].' 'images/userphoto/1/2/2/59874a886a0356abc1_thumb9.jpg';
if(file_exists($foto)) {
    echo '<img class="img-circle" src="'.$foto.'" />';
}
else{
 echo '<i class="fas fa-user-circle"></i>'
}

对于您的第二个问题： 您可以编写 CSS 类并在父级中使用它，在您的情况下它将是 <div class="well align-children"> ：

.align-children{
   line-height: 40px; /* depending on the size of your icon */
   display: inline-block;
   vertical-align: middle;
}

您可以在 html 文档中使用样式：

<style>
.align-children{
   line-height: 40px; /* depending on the size of your icon */
   display: inline-block;
   vertical-align: middle;
} 
</style>