Question

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

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

修改

由于某些原因，相对路径不起作用。我已尝试使用./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")';

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

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

3 个答案: