使用 HTML 导入的 JS 的相对路径资源

Question

我有一个 (Polymer) Web 组件，我想让人们以跨源资源共享 (CORS) 的方式访问它。这工作正常，除了我不确定如何从该组件内的 JS 代码为图像和 JSON 文件等资源提供相对路径。它们被解释为相对于包含页面，而不是相对于 HTML 导入。我认为我想要的是一个 JS 变量，它给出了导入的包含 html 文件的路径。相对路径很重要，因为我还希望人们能够轻松地将其部署到他们自己的站点，而不是依赖于我的资源副本的硬编码路径。

例如，您在 example.com 处加载 index.html，它有：

<link rel="import" href="//my-site.com/components/my-component/my-component.html">

<my-component> ... </my-component>

现在在 my-component.html 中，我有一些 JS 可以根据用户的个人资料加载一些资源 - 图片和 JSON 语言文件 i18next.js。问题是，除非我将它们指定为 my-site.com 的绝对路径，而我不想这样做，否则它们将被解释为相对于 example.com/index.html 处的页面，而不是相对于 example.com/index.html 的路径my-component.html

我在模板中静态指定的任何图像都可以正常工作并正确加载，因为它是相对于 HTML 导入路径的。我只是不确定如何为从 JS 加载的资源执行此操作，因为它们将相对于包含页面（示例。com/index.html）。某处是否有公开此导入路径的属性或函数？谢谢。

Answer 1

我发现您可以使用 document.currentScript.baseURI 从其中的脚本中访问导入的 URL。我正在做这样的事情：

<script>
    (function () {
        var srcURL = new window.URL(document.currentScript.baseURI);
        var baseURL = srcURL.origin + srcURL.pathname.substr(0, srcURL.pathname.lastIndexOf("/") + 1);

        // can use baseURL here to load resources
        Polymer({...});
    })();
</script>

一个问题：当我硫化所有东西时上面的代码不起作用，因为路径改变了。我稍后会研究那个。

Answer 2

要创建相对路径，您可以使用 Polymer 元素的 resolvePath 方法。 Here's the docs on it

例如：this.resolvePath('x-foo.png')

更新：resolvePath 替换为 resolveUrl for Polymer 1.0

使用 HTML 导入的 JS 的相对路径资源

relative path resources from JS with HTML imports

web-component

polymer