how to add image in header or footer-CodePudding

i have the following code in a footer of a web app. i would like to know how could i add an image instead of text. thanks here is my code `

<footer id="page-footer" >
                <div >
                    <div >
                        <div >
                            Crafted with <i ></i> by <a  href="javascript:void(0);" target="_blank">ORTHOLogika</a>
                     **    <img src="../assets/media/photos/logo1.png" alt="Responsive image" >**

</div>
                        <div >
                            <a  href="javascript:void(0);" target="_blank">ORTHOLogika 1.0</a> &copy; <span data-toggle="year-copy"></span>
                        </div>
                    </div>
                </div>
            </footer>

` enter image description here

i dont know how to import the image in the footer

CodePudding user response：

The <img> tag is used to embed an image in an HTML page.

Images are not technically inserted into a web page; images are linked to web pages. The tag creates a holding space for the referenced image.

The <img> tag has two required attributes:

src - Specifies the path to the image alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

Reference :
W3schools - HTML Tag

CodePudding user response：

Path that you have given is must be wrong. Here is for your reference

<header>
    <div id="top-header">   
        <!-- Logo -->
        <div id="logo">
            <img src="images/logo.png" />
        </div>      
        <!-- Navigation Menu -->
        <nav>
            <ul>
                <li ><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Our Products</a></li>
                <li><a href="#">Careers</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </nav>
    </div>
    <!-- Image menu in Header to contain an Image and
        a sample text over that image -->
    <div id="header-image-menu">
    </div>
</header>

#header-image-menu{
    top: 10px;
    position: relative;
}
#header-image-menu img{
    width: 100%;
    margin: none;
    padding: none;
}
#image-text{
    position: absolute;
    top: 60%;
    left: 60%;
    font-family: 'Roboto';
    color: #000;
    transform: translate(-30%, -30%);
    text-align: center;
}