Question

我正在尝试使用Bootstrap文档片段在Bootstrap导航栏中显示png图像作为徽标，但是png不会显示。

我的header.php（我使用的是WordPress，但不希望导航栏可管理）位于“默认”文件夹中，徽标位于“默认”文件夹内的“ img”文件夹中。

这是我的导航栏：

<img src="<?php echo get_site_url() ?>/img/logo.png" width="30" height="30" alt="">
<div class="row">
    <nav class="navbar navbar-expand-lg nav-box">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <a class="nav-item nav-link" href="<?php echo get_site_url() ?>">Home</a>                   
                <a class="nav-item nav-link" href="#">Créer mon plateau de fromages |</a>           
                <a class="nav-item nav-link" href="<?php echo get_site_url() ?>/l-histoire-lepetit">L'histoire Lepetit |</a>
                <a class="nav-item nav-link" href="<?php echo get_site_url() ?>/le-camembert-lepetit">Le camembert Lepetit |</a>
                <a class="nav-item nav-link" href="<?php echo get_site_url() ?>/univers">L'univers Lepetit |</a>
                <a class="nav-item nav-link" href="<?php echo get_site_url() ?>/conseil">Les conseils Lepetit</a>
            </div>
        </div>
    </nav>
</div>

我只尝试过：

img/logo.png

但是没有用。有什么问题？谢谢！

Answer 1

如果您有效地使用开发人员工具，则很容易跟踪损坏的URL问题。 F12打开它。或右键单击图像应出现的位置，然后单击检查元素。然后找到语法的相关区域。在那里，您会注意到图像网址是否损坏。

还尝试使用CSS为img指定特定的宽度和高度。有时可能是因为它没有显示空间。在img上设置宽度和高度可能会解决该问题。

HTML无法使用Bootstrap显示我的png徽标

1 个答案: