html boostrap navbrand图像徽标问题

时间：2018-06-09 03:18:46

标签： html css twitter-bootstrap playframework

我刚接触twitter boostrap我正在尝试创建一个播放应用程序，我使用navbar-brand作为品牌名称带有徽标（大象图片），我无法在谷歌浏览器中打开Chrome代码中是否存在问题？

</head>
   <header>
       <div class="navbar navbar-default">
           <div class="container">
               <div class="navbar-header">
                   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#exnav">
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                   </button>
        </div> <a class="navbar-brand" href="#"><img src="imges/hadoop_ele_copy_copy_copy.jpg" class="img-responsive" alt="Responsive image"></a>
       </div>
   </header>

我在mac book上的chrome中看到的是以下屏幕截图。

enter image description here

由于 斯里兰卡

2 个答案:

答案 0 :(得分：1)

您的图片是保存在imges文件夹还是images/hadoop_ele_copy_copy_copy.jpg。我认为问题是由于路径名不正确。

答案 1 :(得分：0)

Just check your directory name. Make sure that you are keeping image in the correct directory. There is no issue with the code.

<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</head>
<body>
   <header>
       <div class="navbar navbar-default">
           <div class="container">
               <div class="navbar-header">
                   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#exnav">
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                   </button>
        </div> <a class="navbar-brand" href="#"><img src="imges/test.jpg" class="img-responsive" alt="Responsive image"></a>
       </div>
  </header>
</body>
</html>
相关问题
最新问题