Question

我有一个Web应用程序，它是一个JavaScript文件，代码如下：

var arrowimages = { down: ['downarrowclass', 'images/AppNavDownArrow.gif', 23], right: ['rightarrowclass', 'images/AppNavRightArrow.gif'] }

当我在我的Web应用程序的根目录时，对图像的引用按预期工作。当我浏览到我的应用程序中的子文件夹时，它会将相同的子文件夹添加到图像URL并且不加载。

当我在应用程序中的子文件夹中时，如何修改代码以使其指向创建图像路径？

Answer 1

您应该使用/引导路径。这样，路径始终从域根解析。

var arrowimages = { down: ['downarrowclass', '/images/AppNavDownArrow.gif', 23], right: ['rightarrowclass', '/images/AppNavRightArrow.gif'] }

否则，他们将相对解析为当前网址;通过将路径添加到当前文件夹的末尾（除非您使用<base/ > tag（如果是，请删除它）。）

如果您的应用位于子文件夹（例如http://example.com/myapp）内，那么您需要在路径前添加myapp，例如; /myapp/images/AppNavDownArrow.gif。

对于便携式解决方案，您可能需要考虑使用配置参数来存储应用的根目录（例如root = /myapp/）。然后，您可以在JavaScript中的config对象中将此参数输出为explained in my other answer。您的网址将如下所示;

var arrowimages = { down: ['downarrowclass', config.base + '/images/AppNavDownArrow.gif', 23], right: [config.base + '/rightarrowclass', '/images/AppNavRightArrow.gif'] }

Answer 2

使用/images/AppNavDownArrow.gif代替images/AppNavDownArrow.gif。

Answer 3

虽然您可以在路径前加上＆＃34; /＆＃34;要映射到域根目录，域根目录并不总是等于ASP.NET中的应用程序根目录。如果开发环境的结构与您的生产环境不匹配，它还会使您的脚本变得脆弱。

相反，请使用：

var arrowImages = { down: ['downarrowclass', '<%= Page.ResolveClientUrl("~/images/AppNavDownArrow.gif") %>', 23], right: ['rightarrowclass', '<%= Page.ResolveClientUrl("~/images/AppNavRightArrow.gif")  %>'] }

这将确保您的路径指向IIS中当前应用程序上下文的根目录，即域根目录或虚拟目录。

如果您不想将脚本放在页面上并将其保存在.js文件中，而是在masterpage / layout / whatever中，创建一个指向应用程序根目录的变量，然后引用该变量在您的脚本文件中：

<script type="text/javascript">
        var configuration = {
            applicationRoot: '<%= Page.ResolveClientUrl("~/") %>',
                currentPath: '<%= HttpContext.Current.Request.Path %>'
            }
</script>

在您的脚本文件中：

var arrowImages = { down: ['downarrowclass', configuration.applicationRoot +'/images/AppNavDownArrow.gif', 23], right: ['rightarrowclass', configuration.applicationRoot +'/images/AppNavRightArrow.gif'] }

如何始终解析相对于我的Web应用程序根目录的URL？

3 个答案: