javascript - HTML 图像的相对路径。在 Github 页面上找不到 404

Question

我有以下文件结构

demo  
|_ assets  
.....|_ image.png  
.....|_ anotherimage.png  
|_ dist  
.....|_ my-component.html  
.....|_ my-component.js  
|_ index.html  

my-component.html有<img src="../assets/image.png"/> .
my-component.js生成<img src="../assets/anotherimage.png">运行时的 HTML 标记。

这在我的本地 http 服务器上运行良好。
当我将东西推送到 Github Page 时出现问题。

• 内部引用的图片 my-component.html文件正确显示。它将图像 URL 识别为 http://myorg.github.io/myrepo/demo/assets/image.png .
• 未找到 my-component.js 中提到的图像 404文件。它将图像 URL 识别为 http://myorg.github.io/myrepo/assets/anotherimage.png

注意浏览器可识别的两种情况的 URL。没有demo/对于第二种情况。

就像 my-component.js位于demo目录而不是 dist 。但这怎么可能发生。这里有什么问题？以及如何修复它？

已编辑
my-component.html和my-component.js所讨论的问题实际上是 Polymer 组件分为 2 个文件，一个用于模板，另一个用于逻辑代码。 然后index.html通过 <link rel="import" href="dist/my-component.html"> 导入该组件在其代码的顶部。 Polymer 或我之前测试过的任何内容都没有问题，而且我不认为问题涉及 Polymer。

Answer 1

在 WebComponents 中，路径是相对于 HTML 页面的，在 Polymer 中，路径是相对于组件本身的。请参阅https://stackoverflow.com/a/33603356/227299

一个possible solution是使用this.resolveUrl('../assets/image.png')创建您的路径，相对于JS文件。