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

我有一个（聚合物）Web组件，我想让人们以跨源资源共享（CORS）的方式访问它。这工作正常，但我不知道如何可以从该组件内的JS代码提供像图像和JSON文件的相对路径。它们被解释为相对于包含页面，而不是相对于HTML导入。我想要什么我想要的是一个JS变量，它给出了导入的包含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理解为相对于页面，而不是相对于my-component.html

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

来源

2015-03-13 Preston Landers

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

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

更新：resolvePath被替换为resolveUrlPolymer 1.0

来源

2015-03-14 15:49:17 robdodson

谢谢，那就是我一直在寻找的东西。我已经阅读过那份文件，或者我认为，但我一定错过了。 – 2015-03-14 21:48:57

不用担心，文档中有很多东西，所以很容易忽略:) – robdodson 2015-03-18 17:06:27

@robdodson您可以请，请在[Polymer docs]中提供示例（https://www.polymer-project.org/0.5 /docs/polymer/polymer.html#resolvepath）？ – DoK 2015-05-15 09:37:11

我发现你可以在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>

一个问题：上面的代码不工作，当我硫化所有的东西，因为路径的变化。我稍后会研究这一点。

来源

2015-03-13 14:31:12

这可能是值得考虑看看这个问题再：硫化和assetPath（https://github.com/Polymer/硫化/问题/ 51） – robdodson 2015-03-14 15:46:39

聚合物2消除了硫化，所以你可能会运气好。 – codeMonkey 2017-04-13 18:33:31

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

回答

相关问题