来自JS和HTML导入的相对路径资源

Question

我有一个(聚合物)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根据用户的配置文件加载一些资源 - i18next.js的图像和JSON语言文件.问题是,除非我将它们指定为绝对路径my-site.com,我不想这样做,它们将被解释为相对于页面而example.com/index.html不是相对于路径my-component.html

我在模板中静态指定的任何图像都可以正常工作并正确加载,因为它与HTML导入路径相关.我只是不确定如何为从JS加载的资源执行此操作,因为它们将相对于包含页面(example.com/index.html).是否存在暴露此导入路径的某个属性或函数？谢谢.

Answer 1

要创建相对路径,可以使用resolvePathPolymer元素的方法.这是关于它的文档

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

更新:resolvePath替换resolveUrl为Polymer 1.0