CODEWITHSUNDEEP
htmlcssimage
nextstep
nextstep

Reputation: 1460

img src tag not displaying image

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.

enter image description here

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;
}

Upvotes: 1

Views: 122130

Answers (3)

Intros Pector
Intros Pector

Reputation: 61

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.

Upvotes: 1

Eric Holmes
Eric Holmes

Reputation: 415

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

Upvotes: 4

nextstep
nextstep

Reputation: 1460

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!

Upvotes: 5

Related Questions