Bizarre Image Fail - Are you brave enough to look at it???

Question

Okay, this is really weird. None of the pictures from my image folder will load. The console log shows a file not found error. I'm not exactly new to this at this point, so it's nuts that I can't figure out what it is. I've checked and rechecked all of the things that I can think of.

(I am working on a pc and using the latest version of Chrome. When I tried viewing the page in IE and Firefox, again, the page rendered without the picture loading. Only not even the image for the broken link was there. Just nothing.)

The path is css/img/filename.png. Inserted into the page like so:

<div id="logo">
    <img src="css/img/filename.png" class="img-responsive" alt="Responsive image">
  </div>

I've removed the css one line at a time. I am convinced that there is nothing in my styles that is causing the error.

I'm using bootstrap. I've checked those links as well. Here's my head tags:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Store Name</title>
    <link rel="stylesheet" href="css/bootstrap-theme.min.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
</head>

I've changed the extensions on the picture. I've swapped out different pictures with different extensions. I've played around with placing the pics in different folders. As in, placing the image folder outside the css, placing the pics loose at the top of the folder with the index. Nothing works.

So, I'm pretty lost on this one. Anyone who can figure this out will have my utmost respect. And that's pretty darn valuable let me tell you.

Are you up to the challenge??!!

I hope so because I'm not at this point. Lol.

PS

I have since tried taking the picture in question and loading into a different html page using the same file structure. This time the picture loaded just fine. So, whatever the problem is, it must be something that pertains just to this project. I'm continuing to look at the css for issues, but, other than that, I'm stumped.

I should also mention that the picture was working fine yesterday. Today, replaced the picture with other code that I was playing around wtih. I ended removing all of that code and inserting the original image link. That's when it stopped working. I have gone back over my html/css for every bit of the other code. It's a small project, so I'm pretty sure I've removed everything and reverted back to the original setup.

PPS

Another update. I recopied all of the code into new files. I loaded in fresh image files. I just wanted to exclude the possibility of something weird going on with the file permissions. When I opened the page, it was exactly the same. The image is still broken. Now I'm sure the problem has to be something in my html. But I have no idea what it could be. Here's the whole page.

<!DOCTYPE HTML>
<html>
<head>
        <meta charset="utf-8">
        <title>Sweet Harsh</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
</head>

<body>

  <div class="container">
   <ul class="nav nav-tabs" role="tablist">
      <li id="home" ><a href="#">Home</a></li>
      <li id="about"><a href="#">About</a></li>
      <li id="contact"><a href="#">Contact Me!</a></li>
      <li id="work"><a href="#">My Work</a></li>
      <li id="pictures"><a href="#">Pictures</a></li>
    </ul>
  </div>


  <div id="logo">
    <img src="css/img/shlogo.png" class="img-responsive" alt="Responsive image">
  </div>



    <br>
    <br>

    <div>
        <p>© 2014 Store Name. All Rights Reserved.</p>
    </div>

</body>
</html>

Answer 1 · 2014-08-30T17:43:58Z

August 30, 2014 5:43pm

I'm no expert, but I think I might of found something. As you know, your syntax is completely correct, but when I ran this through the W3C validator it came up with 8 errors all on the image tag.

I downloaded bootstrap added your code as the index.html & the image wasn't loading on my computer either. The funny thing is when I re-typed out the exact same image tag it worked fine and the image showed on the page.

<div id="logo">
  <!-- Your img tag -->
  <img src="css/img/shlogo.png" class="img-responsive" alt="Responsive image">
  <!-- My re-typed img tag -->
  <img src="css/img/shlogo.png" alt="img-responsive" class="img-responsive">
</div>

When I ran in the whole code with your img tag commented out, it came up with no errors in the validator. I have no idea what the route cause of this is, but it might have something to do with typing in invalid characters?? Could try writing the same code on another computer to see if you still get the error. Sorry I cant give the actual solution, but thats as close as I could get.

Hope this helps Alex

Welcome to the Treehouse Community

Looking to learn something new?

Ben Goldman

Ben Goldman

Bizarre Image Fail - Are you brave enough to look at it???

1 Answer

Alex Robertson-Brown

Alex Robertson-Brown

Ben Goldman

Ben Goldman

Liam Trant

Liam Trant