JavaScript中圖像的相對路徑

Question

我有一個javascript模塊，它創建一個帶有關閉按鈕（“X”）圖片的div。 這個div和javascript放在我網站上的很多地方。

相對路徑解決方案：當頁面包含javascript時，javascript使用圖像的相對路徑。 相對路徑相對於HTML頁面。 如果不同路徑中的HTML頁面使用此javascript，我將需要2個不同的圖像。

絕對路徑解決方案：我不知道我的團隊成員用於開發的服務器（我確信他不在我的服務器上開發）。 這意味着絕對路徑不起作用。

有一種克服這個問題的簡單方法嗎？ 就像讓腳本以某種方式意識到它的路徑一樣？

Answer 1

可變路徑（測試/暫存/生產域）在javascript中始終是一個問題，最好的選擇是在HTML中包含應用程序/網站的根路徑。 顯而易見的地方是你的模板層。 例如：

<body data-root="${rootContext}">
<!-- or whatever syntax your template layer uses -->

並使用javascript抓取它以便在腳本中使用。

var rootContext = document.body.getAttribute("data-root");

注意，你只能在DOM准備就緒時（或者當document.body可用時，跨瀏覽器不同）;）

另一種選擇，在我看來，不那么漂亮的選擇就是簡單地渲染javascript。

<script>
    var rootContext = ${rootContext} // or whatever syntax your template layer uses.
</script>

至少使用'data-root'技術，您可以將值存儲在任何位置，並避免使用全局定義。

因此，在您引用圖像的代碼中，您可以執行以下操作：

img.src = rootContext + "/media/js/close.gif";

或者創建一個很好的幫助方法：

 // lets use a namespace to avoid globals.
 var myApp = {
     // still need to set this when DOM/body is ready
     rootContext: document.body.getAttribute("data-root"),
     getContext: function( src ) {
         return this.rootContext + src;
     }
 }

img.src = myApp.getContext( "/media/js/close.gif" );

在輔助方法中，您還可以編寫一些代碼以確保正確使用/和諸如此類的東西。

Answer 2

你不能只使用CSS類嗎？ 如果它只是一個包含img的div ，你可以擺脫img並在div上使用background-image 。 從CSS設置這將確保圖像路徑始終相對於CSS文件，並且幾乎肯定無論環境如何（只要CSS中的其他圖像工作）。

然后，您可以相應地在div上設置className 。

Answer 3

有三種方法可以在html中指定圖像的路徑：

完全相對： <img src="kitten.png"/>
絕對關於文件系統，但相對於當前服務器： <img src="/images/kitten.png">
絕對在所有方面： <img src="http://www.foo.com/images/kitten.png">

第二種方法可能適合您。

JavaScript中圖像的相對路徑

問題描述

3 個解決方案

解決方案1
13 已采納 2011-03-01 08:33:31

解決方案2
4 2011-03-01 08:38:06

解決方案3
2 2011-03-01 08:34:27

JavaScript中圖像的相對路徑

問題描述

3 個解決方案

解決方案1 13 已采納 2011-03-01 08:33:31

解決方案2 4 2011-03-01 08:38:06

解決方案3 2 2011-03-01 08:34:27

解決方案1
13 已采納 2011-03-01 08:33:31

解決方案2
4 2011-03-01 08:38:06

解決方案3
2 2011-03-01 08:34:27