Html – Bootstrap img src not loading images from local hard drive

htmltwitter-bootstrap

I am facing an amazing problem that my html program loads images from web but not from local hard drive. I tried alot by changing path and folder but still the issue is same.

<div class="row">
<div class="col-md-4">
    <div class="thumbnail">
        <figure>
            <img src="/images/img.jpg"
                 alt="Ghoomo Phiro Pakistan Adventure Club">
        </figure>
        <div class="caption">
            EveryThing goes there
        </div>
    </div>
</div>
<div class="col-md-4">
    <div class="thumbnail">
        <a href="#" class="thumbnail">
            <img src="https://www.google.com/images/srpr/logo3w.png"
                 alt="Ghoomo Phiro Pakistan Adventure Club">
        </a>
        <div class="caption">
            EveryThing goes there
        </div>
    </div>
</div>

Why does this work:

<img class="img-thumbnail img-responsive"
    src="http://upload.wikimedia.org/wikipedia/sr/0/0c/Firefox-logo.png"
    alt="" />

But not local images:

<img class="img-thumbnail img-responsive"
     src="http://localhost/live/images/logo.png"
     alt="" />

Best Solution

If you use src="/images/fileName" then the browser looks for images folder in the root directory. If images folder is in the same working directory then it won't work. You must have to replace it with either ./images/fileName or images/fileName

Related Question