5

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

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

编辑

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

4

3 回答 3

9

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

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

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

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

于 2013-02-25T15:58:20.590 回答
3

如果您的脚本与您的 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-25T16:00:12.037 回答
1

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

../images/file.jpg

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

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

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

于 2013-02-25T15:59:49.030 回答