javascript - polymer 3 相对路径

标签 javascript svg polymer relative-path

我想将 polymer 元素从 polymer 2 迁移到 polymer 3。

polymer 元素使用包含 .svg 文件的文件夹的相对路径。

const url = this.resolveUrl('./icons/' + this.icon + '.svg');

问题是旧的组件文件是一个 .html 文件,所以如果你包含它,脚本部分中的相对路径总是相同的。

现在组件文件是一个 javascript 文件,所以相对路径 (.) 是包含 javascript 文件的文件的路径。


最佳答案

要解决此问题,请将以下 getter 方法添加到您的元素类中:

static get importMeta() { 
  return import.meta; 
}

当您的元素被加载时,上面的 getter 会分配您元素的 importPath 属性。 resolveUrl 现在将根据 importPath 而不是基于主文档来解析相对路径。

顺便说一句,您还可以在数据绑定(bind)中使用 importPath,如下所示:

<img src$="[[importPath]]/icons/[[icon]].png">

有关 Polymer 为什么默认不重写模板中的 URL 的更多信息,see the documentation on DOM templating .

(顺便说一句,该页面上关于 importPath 的内容似乎需要更新。我 raised an issue 以使用我在上面概述的最新信息更新网站。)

希望对你有帮助

关于javascript - polymer 3 相对路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50818013/

相关文章:

javascript - JS触摸事件挂件点击

javascript - 错误 : Invalid value for <rect> attribute width ="NaN" 6d3. v3.min.js:1 错误:<text> 属性 x ="NaN"的值无效

javascript - 如何根据从 <iron-ajax> 接收的数据创建重复元素?

internet-explorer - event.preventDefault() 在 IE 11 中不适用于自定义事件

Polymer:从另一个文件导入和绑定(bind)模板

javascript - 在 jquery 中复制或克隆整行记录

javascript - 如何使用 javascript 创建自定义 HTML 元素?

javascript - 使用 selenium webdriver 在 IE11 中右键/上下文单击无法正常工作

html - 垂直居中文本和 SVG 元素,没有填充和文本对齐

html - 标记端未显示