img src tag not displaying image

Question

I'm trying to display social media icons at the footer of a webpage using the img src tag (should be simple). The image isn't showing up and I can't find the problem.

html

<div class="mastfoot">
    <div class="inner">
        <p><a href="#"><img src="/images/twitter.png"></a></p>
    </div>
</div>

css

.mastfoot {
    position: fixed;
    bottom: 0;
}

I'm probably overlooking something simple but thanks in advance!

Here's what I'm getting when I inspect image file in browser.

Here's code for CSS inner class

.site-wrapper-inner {
    display: table-cell;
    vertical-align: top;
}

.inner {
    padding: 30px;
}

.site-wrapper-inner {
    vertical-align: middle;
}

Answer 1

Open up your Console (Right Click + Inspect Element in most browsers) to see if your URL for the image is broken.

You can also click on the URL that it's generating. Chances are the / at the start of the path is not what you want. That goes to your root path, not the current directory. Try using images/twitter.png instead.

The path you are looking for is probably something like this:

http://localhost/myproject/images/twitter.png

But because of the initial / , this is the URL that your browser would look for:

http://localhost/images/twitter.png

Answer 2

Fixed problem, I redirected the path to my assets folder which is where the images folder is,

<img src="assets/twitter.png">

And it worked. Don't really know why though!

Answer 3

A good way is to check what URL the browser is seeing, by looking at the source code of the page having the broken image link. For example, in Firefox via Tools-->Web Developer-->Page Source, in Google Chrome via -->More tools --> Developer Tools --> Elements. That helped me see what URL the browser was seeing for the image, then I moved the image and changed the URL to make it work.