如果在html页面中的图像没有显示但如果在同一个html页面包含在另一个html页面中它的工作时如何修复它?

如果在html页面中的图像没有显示但如果在同一个html页面包含在另一个html页面中它的工作时如何修复它?

问题描述:

I am creating a web application which has a separate file for header specifications called head.php. I have included this file in rest of my web pages. Now, when I open head.php in browser, it doesn't display any of the images mentioned in it. Whereas, when I open rest of the pages that include head.php in browser, the images mentioned in head.php are displayed properly. How should I fix it ??

I have tried copying images in the same folder. But I don't think that there is any issue in the url part, or else images wouldn't be shown at all in any webpage. Her's the code of head.php :

    <!doctype html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
        #foot{
            height:50px;
            width:100%;
            margin-top:140px;
            position:relative;
            bottom:0;
            left:0;
            background-image:url("img/w4.jpg");
        }
        p{
            color:white;
            float:right;
            padding-right:20px;
            font-size:18px;
        }
    </style>
    </head>
    <footer>
    <div id="foot">
        <p>Leave Management Portal</p>
    </div>
    </footer>
    </html>

img/w4.jpg is a relative path. It is saying "inside the images folder inside the current folder, there is a w4.jpg image."

If you change locations say from mysite.com/ to mysite.com/otherpage your relative path will be looking for /otherpage/img/w4.jpg.

You can add a slash at the beginning to say "start at the root" /img/w4.jpg or you can use a PHP method to always point to the same directory no matter where you are in your website directory structure.