图像的 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 文件。