如何在asp.net mvc項目中正確引用腳本中的圖像文件？

我有一個在我的網站（例如www.example.com/go/）的子目錄上運行的asp.net應用程序，並且在一個.js腳本文件中，我試圖引用位於我的圖像目錄中的圖像項目。當我使用/Images/add.png來引用圖像時，我可以在調試模式下看到圖像，但不能在應用程序發佈時看到圖像（在調試模式下，應用程序只運行在logalhost：port＃上，而不是在/去/ url路徑）。當我使用go/Images/add.png來引用圖像時，我可以在已發佈的Web應用程序上看到圖像，但不能在調試模式下進行測試。從我的腳本中引用圖像資源的正確方法是什麼，以便我可以在生產和調試模式下看到它？如何在asp.net mvc項目中正確引用腳本中的圖像文件？

編輯

出於某種原因，相對路徑不工作。我用./Images/add.png和../Images/add.png進行了實驗。

來源

2013-02-25 JSideris

我有一些問題，其中，在我的項目圖像不被複制自動售貨機當我部署時。我會檢查發佈端的目錄，看看它們是否在那裏。 – 2013-02-25 15:58:50

@Llepwryd是的，我確保圖像在目錄中，我可以通過輸入URL訪問它們。 – JSideris 2013-02-25 16:09:00

您可以創建一個全局JavaScript變量指向圖像：

<script type="text/javascript"> 
    var imageUrl = '@Url.Content("~/images/add.png")'; 
</script>

，然後你的JavaScript文件，你可以使用這個全局變量來表示圖像的位置，而不是硬編碼它的價值，這是你內心已經發現，在您將應用程序發佈到虛擬目錄中時不起作用。

不用說，這個腳本應該包含在視圖之前實際使用這個javascript變量的腳本。

來源

2013-02-25 15:58:20

這不是最優雅的解決方案，但它對我有用。我在全局視圖中創建了一個名爲imageDir的js var，並根據需要將文件名追加到它。 – JSideris 2013-02-25 16:29:49

你需要從基於腳本的相對路徑要麼引用圖像所以它可能是

../images/file.jpg

，或者需要一些淨包括成JavaScript的

var image = '@Url.Content("~/uploads/file.jpg")';

了「〜'符號表示從項目的根目錄開始（即使在該子文件夾中）

來源

2013-02-25 15:59:49 LiamB

如果您的腳本沒有與您的MVC視圖分離，那麼只需使用var image = @Url.Content("~/Images/add.png")你的腳本。

否則，不管是你知道你的腳本文件，並在您的圖像彼此相使用相對路徑：

../Images/add.png

或者使用MVC獲取內容的相對路徑，並將其添加以您閱讀使用腳本元素：

<div id="myDiv" data-image="@Url.Content("~/Images/add.png")"></div> 

var imageUrl = document.getElementById('myDiv').attributes["data-image"].value;

示例 - http://jsfiddle.net/hbBKs/1/

來源

2013-02-25 16:00:12

我忘了提及我嘗試了相對目錄方法，但它在我的情況下不起作用。 – JSideris 2013-02-25 16:30:49

如何在asp.net mvc項目中正確引用腳本中的圖像文件？

回答

相關問題