Question

所以我正在运行这个javascript，一切正常，除了背景图片的路径。它适用于我的本地ASP.NET Dev环境，但在部署到虚拟目录中的服务器时不起作用。

这是在外部.js文件中，文件夹结构是

Site/Content/style.css
Site/Scripts/myjsfile.js
Site/Images/filters_expand.jpg
Site/Images/filters_colapse.jpg

然后这是从

中包含js文件的地方

Site/Views/ProductList/Index.aspx

$("#toggle").click(function() {
    if (left.width() > 0) {
        AnimateNav(left, right, 0);
        $(this).css("background", "url('../Images/filters_expand.jpg')");
    }
    else {
        AnimateNav(left, right, 170);
        $(this).css("background", "url('../Images/filters_collapse.jpg')");
    }
});

我尝试过使用'/Images/filters_collapse.jpg'但这也不起作用;但是，如果我使用'../../Images/filters_collapse.jpg'，它似乎可以在服务器上运行。

基本上，我想要具有与ASP.NET tilda相同的功能 - ~。

更新

外部.js文件中的路径是否包含在它们所包含的页面中，或者是.js文件的实际位置？

Answer 1

JavaScript文件路径

在脚本中，路径相对于显示的页面

为了方便起见，您可以打印出这样的简单js声明，并在整个脚本中使用此变量：

2010年2月左右在 StackOverflow 上使用的解决方案：

<script type="text/javascript">
   var imagePath = 'http://sstatic.net/so/img/';
</script>

如果您在2010年左右访问此页面，您可以查看 StackOverflow的html源，您可以在{{1中找到这个badass one-liner [格式化为3行:)]部分

Answer 2

使用jQuery在运行时获取javascript文件的位置，方法是解析DOM引用它的'src'属性：

var jsFileLocation = $('script[src*=example]').attr('src');  // the js file path
jsFileLocation = jsFileLocation.replace('example.js', '');   // the js folder path

（假设您的javascript文件名为'example.js'）

Answer 3

正确的解决方案是使用css类而不是在js文件中编写src。例如，而不是使用：

$(this).css("background", "url('../Images/filters_collapse.jpg')");

使用：

$(this).addClass("xxx");

并在页面中加载的css文件中写入：

.xxx {
  background-image:url('../Images/filters_collapse.jpg');
}

Answer 4

好问题。

在CSS文件中，URL将相对于CSS文件。
使用JavaScript编写属性时，URL应始终相对于页面（请求的主要资源）。

我知道JS中没有内置tilde功能。通常的方法是定义一个指定基本路径的JavaScript变量：

<script type="text/javascript">

  directory_root = "http://www.example.com/resources";

</script>

并在动态分配URL时引用该根。

Answer 5

对于我正在处理的MVC4应用程序，我在_Layout.cshtml中放置了一个脚本元素，并为所需的路径创建了一个全局变量，如下所示：

<body>

<script>
    var templatesPath = "@Url.Content("~/Templates/")";
</script>

<div class="page">
    <div id="header">

       <span id="title">

        </span>
    </div>
    <div id="main">


        @RenderBody()
    </div>
    <div id="footer">
        <span></span>
    </div>
</div>

Answer 6

我使用了pekka的模式。我认为还有另一种模式。

<script src="<% = Url.Content("~/Site/Scripts/myjsfile.js") %>?root=<% = Page.ResolveUrl("~/Site/images") %>">

并在myjsfile.js中解析了查询字符串。

Plugins | jQuery Plugins

Answer 7

请使用以下语法在javascript中享受asp.net tilda（“〜”）的奢华

<script src=<%=Page.ResolveUrl("~/MasterPages/assets/js/jquery.js")%>></script>

Answer 8

我发现这对我有用。

    <script> document.write(unescape('%3Cscript src="' + window.location.protocol + "//" +     
    window.location.host + "/" + 'js/general.js?ver=2"%3E%3C/script%3E'))</script>

脚本标签之间的

当然......（我不确定为什么脚本标签没有显示在这篇文章中）......

Answer 9

您需要添加runat="server"并为其分配ID，然后指定如下的绝对路径：

<script type="text/javascript" runat="server" id="myID" src="~/js/jquery.jqGrid.js"></script>]

从代码隐藏中，您可以使用ID以编程方式更改src。

Answer 10

这在ASP.NET webforms中很有效。

将脚本更改为

<img src="' + imagePath + 'chevron-large-right-grey.gif" alt="'.....

我有一个每个目录级别的母版页，这是在Page_Init事件

中

  Dim vPath As String = ResolveUrl("~/Images/")
    Dim SB As New StringBuilder
    SB.Append("var imagePath = '" & vPath & "'; ")
    ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), "LoadImagePath", SB.ToString, True)

现在无论应用程序是在本地运行还是部署，都可以获得正确的完整路径

http://localhost:57387/Images/chevron-large-left-blue.png

Javascript中的相对路径在外部文件中

10 个答案:

JavaScript文件路径