如何从asp.net mvc项目中的脚本正确引用图像文件？

Question

我有一个asp.net应用程序在我的网站的子目录（即www.example.com/go/）上运行，并且在.js脚本文件中，我正在尝试引用我项目的Images目录中的图像。

当我使用/Images/add.png来引用图像时，我可以在调试模式下看到图像，但是在发布应用程序时却看不到（当处于调试模式时，应用程序只在logalhost上运行：端口＃而不是在/ go / url path）。 当我使用go/Images/add.png来引用图像时，我可以在已发布的Web应用程序上看到图像，但在调试模式下进行测试go/Images/add.png看不到。 从我的脚本引用图像资源的正确方法是什么，以便我可以在生产和调试模式下看到它？

编辑

由于某种原因，相对路径不起作用。 我已经尝试过./Images/add.png和../Images/add.png 。

Answer 1

您可以创建指向图像的全局javascript变量：

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

然后在你的javascript文件中你可以使用这个全局变量来引用图像位置，而不是硬编码它的值，正如你已经发现的那样，当你在虚拟目录中发布应用程序时它不起作用。

不用说，这个脚本应该包含在实际使用这个javascript变量的脚本之前的视图中。

Answer 2

如果您的脚本与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/

Answer 3

您需要根据脚本从相对路径引用图像，以便它可以

../images/file.jpg

或者您需要在Javascript中包含一些.Net

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

'〜'符号表示从项目的根开始（即使在那是一个子文件夹）