CODEWITHSUNDEEP
firebug
user5858
user5858

Reputation: 1221

How to find out the URL of an image using Firebug or Chrome DevTools?

I'm not able to find out the logo image URL (the tree in the circle saying) in this page:

http://www.woodstock.ac.in/

I've used both Firebug (which I use regularly) and also Chrome's DevTools, which point to text in which I can't find the logo's URL.

I'd like to know where it is hidden and how to locate it using Firebug.

Upvotes: 0

Views: 10787

Answers (3)

FrankTan
FrankTan

Reputation: 1686

Using chrome you can right click on the page you have the the tab:

 - RESOURCES

and inside you have the directory:

 - Frames
   - www.woodstock.ac.in
   - images

inside images you find all images used by the website. I see also see the logo.

Upvotes: 0

Sebastian Zartner
Sebastian Zartner

Reputation: 20125

To find out the URL of the image using Firebug you have two options:

  1. Inspect the HTML and CSS
    When inspecting the HTML structure you need to know that the image can be referred to in two ways: Either within the HTML structure itself via the <img> tag or within the CSS applying to the element (shown in the Style side panel), normally via the background or background-image property.
    To get the element, which has the image, do the following steps:

    1. Right-click the image on the page and choose Inspect Element with Firebug from the context menu
    2. Check whether the image is referenced within the HTML or the CSS related to the element.
    3. If not, delete the element by pressing Del on right-clicking the element within the HTML panel and choosing Delete Element from the context menu and repeat from step 1.

      In the end you'll see that the image is applied to the table with the id #topbanner via the CSS background-image property. To copy the URL, right-click it and choose Copy Image Location from the context menu.

  2. Inspect the network requests You can check the network requests for the image using the Net panel. Therefore you need to follow these steps:

    1. Activate the panel
    2. Reload the page
    3. Select the Images filter to ensure to just see the transfered images
    4. Hover each image request to see a preview of the image

      You'll find the request for the image saying "GET homepg_bg.png". To copy the URL, right-click the request and choose Copy Location from the context menu.

In other developer tools these steps work similar.

Upvotes: 0

Today
Today

Reputation: 54

Hey the Logo hasnt been inserted seperatly in the website and it is added as a background-image property in the css p Tag!. background-image:url(/uploaded/images/home/hometb_bg.png);

http://www.woodstock.ac.in/uploaded/images/home/hometb_bg.png

Upvotes: 0

Related Questions