Angular 和 gh-pages 不从 Assets 文件夹加载特定图像

Question

要在 github 页面上部署项目，我正在使用此命令:

ng run ticket-shop:deploy --base-href /deploy/

我的问题是 gh-pages 在调用 assets 文件夹时有一些严重的问题。它总是跳过 '/deploy/' 部分。我在堆栈和 github 上发现了许多其他问题，但似乎没有一个能解决它。我的问题的不同之处在于，在将“/deploy/”硬编码到 Assets url 之后，它仍然会丢失一些图像并加载其他图像。

根据我的阅读应该是这样的:

根据我的阅读，从css调用assets文件夹需要使用相对路径来完成，所以它应该是这样的:

background-image: url("../assets/foobar.jpg");

但是不行，gh pages正在寻找这个地址下的 Assets :

https://me.github.io/assets/foobar.jpg

代替

https://me.github.io/deploy/assets/foobar.jpg

我的解决方法

因为我找不到这个问题的任何答案，我对此失去了耐心，我硬编码了“/deploy/”部分，它确实“不干净”，但至少它有点工作。有趣的是，这是我对其他问题的变体 - 它适用于某些图像，而对其他图像无效。

我在 css 中的每个 url 都是这样的:

background-image: url("/deploy/assets/foobar.jpg");

它会加载除一张图片之外的所有图片，我不知道为什么，对于一张特定图片它仍在寻找:

https://me.github.io/assets/neverlucky.jpg

Answer 1

我通过使用“~”字符解决了这个问题:

background-image: url("~/assets/foobar.jpg");