Ресурсы относительного пути от JS с помощью импорта HTML

Question

У меня есть (Полимер) веб-компонент, который я хочу сделать доступным для людей в режиме совместного использования ресурсов (CORS). Это прекрасно работает, но я не уверен, как я могу дать относительный путь для ресурсов, таких как изображения и файлы JSON, из JS-кода внутри этого компонента. Они интерпретируются как относительные к содержащейся странице, а не по отношению к импорту HTML. Что я думаю Я хочу переменная JS, которая дает путь к содержащемуся html-файлу, который был импортирован. Относительный путь важен, потому что я также хочу, чтобы люди могли легко развернуть это на своем собственном сайте и не полагаться на жесткий путь к моей копии ресурса.

Например, при загрузке index.html на example.com и имеет:

<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). Есть ли какой-либо атрибут или функция, которая предоставляет этот путь импорта? Благодарю.

Answer 1

Для создания относительных путей вы можете использовать метод resolvePath вашего полимерного элемента. Here's the docs on it

например: this.resolvePath('x-foo.png')

Update: resolvePath заменяется resolveUrl для Polymer 1.0

Answer 2

Я узнал, что вы можете получить доступ к URL-адресу импорта изнутри скрипта внутри него с помощью document.currentScript.baseURI. Я делаю что-то вроде этого:

<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> 

Одна проблема: приведенный выше код не работает, когда я вулканизацию все потому, что пути меняются. Я займусь этим немного позже.