时间戳

首页 > 解决方案 > HTML not displaying my png logo with Bootstrap

html - HTML not displaying my png logo with Bootstrap

问题描述

I'm trying to display a png image as a logo in a Bootstrap navbar, using the Bootstrap doc snippets, but the png won't display.

My header.php (I'm using WordPress, but don't want the navbar to be administrable) is in the "default" folder, and the logo is in an "img" folder inside the "default" folder.

Here's my navbar :

<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>

I tried with only :

img/logo.png

But it didn't work. What's the issue ? Thanks !

标签： htmlcsstwitter-bootstrap

解决方案

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

还可以尝试使用 css 为 img 提供特定的宽度和高度。有时可能是因为它没有空间出现。在 img 上给出宽度和高度可能会修复它。

推荐阅读