通過Chrome Inspector CSS查找圖像的根路徑

Question

我正在編輯wordpress模板，我需要找到html類/ id“ .navbar-header”，這樣我才能在html中看到它鏈接到的圖像。 所以我可以將圖像更改為兩倍大小。

我如何找到此圖像的根路徑？ 這樣我就可以更改圖像。 我在用chrome inspector工具找到了當前的CSS部分。

/* MADS EDIT sticy nav from 100% to 215%

orignal code here:
.sticky-nav .navbar-header img {
    max-height: 100%;
    -webkit-backface-visibility: hidden;

*/

.sticky-nav .navbar-header img {
    max-height: 100%;
    -webkit-backface-visibility: hidden;

Answer 1

轉到Chrome開發者工具的網絡面板
轉到其中的圖像面板
重新加載頁面並在其中找到您的圖片，檢查圖片網址:)

Answer 2

那很簡單：

1. 將鼠標移到圖像上。
2. 右鍵單擊並選擇檢查。
3. 現在，在“元素”選項卡中，您可以看到帶有src的檢查圖像。

_{我在您的SO簽名圖片上進行了測試。}

Answer 3

我如何找到此圖像的根路徑？ 這樣我就可以更改圖像。

除非網站使用apache（server）根作為自己的根，否則無法在前端上找到服務器上文件的“ root path （目錄路徑）”。

我為什么這么說

服務器可能使用位於服務器根文件夾內部的文件夾來服務網站，但是圖像鏈接仍會相對於域出現。

例如。

The url of the website is say 
http://example.com

Web root folder on server:
/var/www/html/websites/myprojects/2016/example/

The Path to the image would be
/var/www/html/websites/myprojects/2016/example/images/myimg.jpeg`

The location of the image shown on frontend would be.
http://example.com/images/myimg.jpeg