來自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的相對路徑資源

回答

相關問題