如何使用Firebug或Chrome DevTools查找图像的URL？

Question

我无法在此页面中找到徽标图片网址（圆圈中的树）：

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

我已经使用了Firebug（我经常使用）和Chrome的DevTools，它指向我无法找到徽标URL的文本。

我想知道它隐藏在哪里以及如何使用Firebug找到它。

Answer 1

嘿标志没有单独插入网站，它被添加为css p Tag！中的背景图像属性。背景图像：网址（/upload/images/home/hometb_bg.png）;

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

Answer 2

使用chrome，您可以右键单击您拥有该选项卡的页面：

 - RESOURCES

在里面你有目录：

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

在图片中你可以找到网站使用的所有图片，我也看到了徽标

Answer 3

要使用Firebug查找图像的URL，您有两种选择：

1. 检查HTML和CSS 在检查HTML结构时，您需要知道图像可以通过两种方式引用：在HTML结构本身中通过<img>标记或在应用于元素的CSS中（在Style side panel中显示），通常通过background或background-image财产。 要获取具有图像的元素，请执行以下步骤： 右键单击页面上的图像，然后从上下文菜单中选择“使用Firebug检查元素” 检查图像是在HTML中引用还是与元素相关的CSS中引用。 如果没有，请在右键单击HTML panel中的元素并从上下文菜单中选择“删除元素”时按Del删除元素，然后从步骤1开始重复。 最后，您将看到图像通过CSS #topbanner属性应用于具有id background-image的表。要复制URL，请右键单击该URL，然后从上下文菜单中选择“复制图像位置”。
2. 检查网络请求您可以使用Net panel检查网络对图像的请求。因此，您需要按照以下步骤操作： 激活面板 重新加载页面 选择图像过滤器以确保只看到传输的图像 将每个图像请求悬停在其上以查看图像的预览 你会发现图像请求“GET homepg_bg.png”。要复制URL，请右键单击该请求，然后从上下文菜单中选择“复制位置”。

在其他开发人员工具中，这些步骤类似。