使用JavaScript的相对URL

Question

我有一个菜单，每个菜单项都有一张图片。这是一个菜单项的代码：

<script type="text/javascript">        
    <!--
    function changeImage(element, hoverImage) {
        document.getElementById(element).src = hoverImage;
    }
    // -->
</script>
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Menu.ascx.cs" Inherits="UserControls_Menu" %>
<ul id="navmenu">
    <li><a id="default" runat="server" href="~/Default.aspx" 
        onmouseover="changeImage('sideBar_Menu1_Image7', 'Images/Calendar32x32.png');"
        onmouseout="changeImage('sideBar_Menu1_Image7', 'Images/Calendar24x24.png');">
        <table cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td style="height: 32px; width: 32px">
                    <asp:Image ID="Image7" runat="server" ImageUrl="~/Images/Calendar24x24.png" />
                </td>
                <td style="vertical-align: middle">
                    <asp:Label ID="Label6" runat="server" Text="CALENDAR" meta:resourcekey="Label6Resource1"></asp:Label>
                </td>
            </tr>
        </table>
    </a></li>

当我运行我的应用程序时，当我在根文件夹中时，菜单上的图像将加载，但当我在其他地方时，它们将不再加载。是否可以通过js实现？我真的不想现在开始制作如此多的css类来解决这个问题。

稍后编辑： 解决方案由BL项目、Jobs项目和名为CRM的网站组成……当在本地机器上运行时，如果我写/CRM/Images/Image.png，它可以正常工作，但当发布时就不能正常工作……如果我写/Images/Image.png，在本地主机上不起作用，但在发布时却可以工作……我不会知道路径，因为它将部署到更多的客户端，每个客户端将有不同的路径……但我已经找到了一个解决方案，并且下面是代码

谢谢

- bokkie

Answer 1

在URL前加上/表示相对路径：

/Images/Calendar32x32.png
^ Add slash

已更正的代码：

<a id="default" runat="server" href="~/Default.aspx" 
  onmouseover="changeImage('sideBar_Menu1_Image7', '/Images/Calendar32x32.png');"
  onmouseout="changeImage('sideBar_Menu1_Image7', '/Images/Calendar24x24.png');">

- James Hill

---

@bokkie，你在控制台中是否收到了错误信息？这是在JS中指定相对路径的正确方式。 - James Hill

这并不能解决我的问题...较低的回答和评论找到了问题的根源，我只需要找到一个解决方案。 - bokkie

@bokkie，恕我直言，我的回答确实回答了你最初的问题。你问如何在JS中指定相对路径-我的回答就是这样做。看起来你在评论中添加了要求和额外信息。显然，这不是在SO上获得答案的最佳方式。我的回答回答了你最初的问题。 - James Hill

整个故事的重点不就是解决这个问题并帮助其他人吗？如果你往下看，你会发现James Montagne深入挖掘并找到了问题的原因...所以人们来到这里，阅读并知道了问题出在哪里...所以你认为的答案对解决问题没有任何帮助。但还是感谢你的努力，我相信每个人都会感激的。 - bokkie

如果你不知道问题的起因，就不应该寻求帮助...好的，我明白了...那么，在得到帮助或朋友的帮忙后，我会编辑我的帖子，说明我们已经找到了问题的原因，并且在下面他们可以找到解决方案...感谢你启发我，亲爱的朋友。 - bokkie

Answer 2

以 / 开始你的相对路径。这将从站点的根目录开始，而不是从当前位置开始。

编辑：根据评论，如果您所指的“根”不是站点的根目录，则需要在相对URL中包含子站点的路径。

例如，如果您所指的URL为“根”是http://www.somesite.com/some/sub/site，那么您的相对URL应该是/some/sub/site...。如果您只使用/...，则会跳转到http://www.somesite.com/...，而不是http://www.somesite.com/some/sub/site/...。

---

另一种选择，根据您的文件夹设置，可以使用..向上移动一个级别。

例如，如果您有一个页面.../CMR/pages/something.aspx，并且在该页面中您想要指向.../CMR/Images/someimg，那么您可以使用../Images/someimg。 ..将带您上升一个级别。

- James Montagne

---

也许如果您给我们一个关于您的应用程序URL是什么样子的例子，那会有所帮助。这确实有效，可能是因为您不在URL的根目录下，而是在子站点中？ - James Montagne

CRM\Admin\Admin.aspx CRM\Admin\otherfiles CRM\Images.png images CRM\Default.aspx CRM\ other .aspx files...应用程序从Default.aspx开始启动...所以当我在那里时，我可以看到图片...还有悬停效果，但是当我通过菜单上的Admin按钮进入CRM\Admin\Admin.aspx时，悬停效果就不再起作用了...希望你明白我的意思，否则请让我知道...............CRM是三个项目之一，但这在我们的情况下并不重要。 - bokkie

我不同意这与编程无关。如果你的URL是http://www.something.com/CRM/...，那么你的相对URL应该是/CMR/...，因为你的“项目”根目录不是站点根目录。/是根目录(没有CRM)。 - James Montagne

是的，你说得对，我本来想编辑我的回复，但已经太晚了:) ...所以我有两个项目，一个是BL，一个是Jobs，第三个是我们正在谈论的网站...所以当我在我的代码中写路径/CRM/Images/Image.png时，它可以正常工作...我想如果我把它留在/Images/Image.png，当我将其发布到客户端时，它也会工作...问题是，我如何让两者都能正常工作？ - bokkie

如果每个环境的路径完全不同，您将需要一些服务器端配置来在它们之间进行切换。 - James Montagne

Answer 3

试试这个：

<link href="<%=request.getContextPath()%>/css/styles.css" rel="stylesheet" type="text/css">

- bmoran

Answer 4

尝试在Images/Calendar32x32.png之前写入"~/"。

- Kemal Can Kara

---

我也尝试过了，但没有成功... 就我所知，Javascript 不知道如何解释“~”？ - bokkie

Answer 5

好的，我已经找到了解决我的问题的方法： 新代码将如下所示：

<script type="text/javascript">        
<!--
function changeImage(element, toReplace, withReplace) {
    var str = document.getElementById(element).src;
    document.getElementById(element).src = str.replace(toReplace, withReplace)
}
// -->

<%@ control language="C#" autoeventwireup="true" codefile="Menu.ascx.cs" inherits="UserControls_Menu" %>
<ul id="navmenu">
    <li><a id="default" runat="server" href="~/Default.aspx" onmouseover="changeImage('sideBar_Menu1_Image7', 'Calendar24x24.png', 'Calendar32x32.png');"
        onmouseout="changeImage('sideBar_Menu1_Image7', 'Calendar32x32.png', 'Calendar24x24.png');">
        <div class="divImage">
            <asp:Image ID="Image7" runat="server" ImageUrl="~/Images/Calendar24x24.png" />
        </div>
        <div style="float: left; padding-top: 3px;">
            <asp:Label ID="Label6" runat="server" Text="CALENDAR" meta:resourcekey="Label6Resource1"></asp:Label>
        </div>
        <div style="clear: both;">
        </div>
    </a></li>

图片必须放在同一个文件夹中，我这里通常都是这样做的，但我想每个人都会把它们放在同一个文件夹中...所以不应该有问题。谢谢你的帮助。

- bokkie

---

您还可以使用<base>标签和url，该url成为相对url的基本url。例如<base href="http://<%= HttpContext.Current.Request.Url.Authority + HttpContext.Current.Request.ApplicationPath%>" />，那么所有的相对url都可以正常工作（请确保所有相对url开头没有斜杠(/)）。 - Hitesh.Aneja