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 页面时出现问题。

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 中，它们是相对于组件本身的。参见

一个 is to create your path using this.resolveUrl('../assets/image.png')，相对于JS文件。

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

HTML relative path to image. Cannot find 404 on Github Page

html

javascript

url

image

github-pages