CODEWITHSUNDEEP
htmlimagesrc
Fanuel Mpanje
Fanuel Mpanje

Reputation: 43

Relative linking <img> tag src

I have an HTML page located in localhost/about/ and an image located in localhost/images. In my HTML, I have an img tag like this:

img src="../images/logo.png"

When I view this page in a browser, the logo image is shown for a second and the alt text appears. Inspecting the image info, the page in the src is changed to "localhost/about/images/logo.png".

Edit: I am displaying the image like this.

 <!-- header-left start -->
 <!-- ================ -->
 <div class="header-left">
     <div class="logo">
         <a href="../"><img id="logo" src="../images/logo.png" alt="Alt Text" width="196" height="60"></a>
     </div>
 </div>
 <!-- header-left end -->

Folder Structure: The image 'logo.png' is in the root 'dir' of the folder 'images'

Is the anything I am doing wrong with this relative path source?

Upvotes: 2

Views: 937

Answers (1)

Technohacker
Technohacker

Reputation: 735

You might want to check the baseURI property of the document javascript object. As defined by MDN:

The base URL is used to resolve relative URLs when the browser needs to obtain an absolute URL, for example when processing the HTML element's src attribute or XML xlink:href attribute.

Check the base URL value by entering the following in the Javascript Console:

console.log(document.baseURI);

Upvotes: 1

Related Questions