CODEWITHSUNDEEP
htmlcssimagewebbootstrap-4
ByteMe
ByteMe

Reputation: 9

img src not working with navbar bootstrap

My image does not appear, nor does the alt, I have tried different paths, but no luck.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
  <a class="navbar-brand" href="index.html">
    <img src="//assets/images/psa.png" alt="" width="30" height="24" class="d-inline-block align-top">
    psa
  </a>
  </div>
</nav>

Upvotes: 0

Views: 879

Answers (3)

Murat Can
Murat Can

Reputation: 13

Since this structure is flex, you should give the width value higher.

Upvotes: 0

Atharva Rathi
Atharva Rathi

Reputation: 23

The reason it is not working because you have put "//" in the src which is not valid, instead if it is in the same directory,put only "/" instead of "//". And if the image is not in the same directory put the complete URL of the image.

So, if in the same directory the code should be :-

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="index.html">
      <img src="/assets/images/psa.png" alt="" width="30" height="24" class="d-inline-block align-top">
      psa
    </a>
  </div>

And if in a different directory or root or domain ,you will have to put complete URL, for now we consider that the image is in :- https://example.com/assets/images/psa.png, so the code will be :-

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="index.html">
      <img src="https://example.com/assets/images/psa.png" alt="" width="30" height="24" class="d-inline-block align-top">
      psa
    </a>
  </div>

For more information, check out this :- https://www.geeksforgeeks.org/html-file-paths/

Upvotes: 1

shv
shv

Reputation: 57

You should try giving it absolute path:

<img src="/absolute/path/to/file">

for example I have a .png file in /home/myusername/pics/cool-anime.png, then it should be like so:

<img src="/home/myusername/pics/cool-anime.png">

it's also depends on the location of the .png file compares to the .html file. for more reading, you can check this site: https://www.w3schools.com/html/html_filepaths.asp

Upvotes: 0

Related Questions