Unable to Display image as link in navbar with bootstrap?

Question

The image in the code below will not show, when I remove the alt attribute it shows a broken link. It's not the image itself because even when I try other images or links to images it is still broken.

I am very new to Bootstrap, is there something like a class I need that I am missing?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Bootstrap Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>

  <!-- Nav Bar -->
<nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">
    <a class="navbar-brand" href="#"><img src="C:\xampp\htdocs\images\logo1.jpg" /></a>
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
</nav>




  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>

</html>

does you have an error while debugging with devTools? it seems to be wrong image path... — Calvin Nunes, Feb 08 '18 at 20:30
First check the image path. And then you can check the docs https://getbootstrap.com/docs/4.0/components/navbar/#brand :) — Klooven, Feb 08 '18 at 20:31

score 1 · Answer 1 · answered Feb 08 '18 at 21:43

You are missing the path. The path you are using can't be found by any browser; because the " C:\xampp\htdocs\images " path is the C drive of your computer & browser can't find the path in your code_directory.And so..there is no image ..that's why there is no link.

You must actually need to create a folder as you like [example:Images] in your code directory..place the image there & create the valid path like:

<img src="Images\logo1.jpg" alt=""/>

Or you can use a online link like:

src="https://www.example.com/logo.png"

Berendschot · Accepted Answer · 2018-02-08T21:54:47.150

The source (src) attribute on an image embed element defines the location of where your image is saved. In the code you provided you are referring to an image located on your very own computer. That's why when you upload your webpage the image will not appear, your webserver will most likely not have a C:Drive. However your code is telling your server to search for an image stored in that location.

In <img src="C:\xampp\htdocs\images\logo1.jpg"/> you should change the src-attribute to an url of an image that is stored on your webserver or anywhere else on the internet.

In the snippet below I've replaced the image with an image hosted on the internet, and as you can see, it's working.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <!-- Nav Bar -->
<nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">
    <a class="navbar-brand" href="#"><img src="http://lorempixel.com/output/fashion-q-c-20-20-6.jpg" /></a>
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
</nav>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Unable to Display image as link in navbar with bootstrap?

2 Answers2