在映像URL中动态添加资产前缀 - Ember-CLI

Posted 2021-04-15

我正在尝试使用ember serve加载应用程序。一些图像未找到错误。在CSS中：

background-image: url(assets/images/image.svg);

它重定向到

http://localhost:4200/assets/assets/images/image.svg 404（未找到）

因为在这个URL中添加了两个资产名称，这就是找不到图像的原因，我不知道这个资产的添加位置。

当在URL的前缀中添加'/'时，我能够在应用程序中看到图像。

background-image: url(/assets/images/image.svg);

它重定向到

http://localhost:4200/assets/images/image.svg - 工作正常

如何在不使用'/'作为资产前缀的情况下避免使用两个资产名称。请帮助任何人...

答案

没有前导斜杠的URL /是CSS中的相对URL以及html中的相对URL。 URL相对于CSS文件的位置而不是CSS文件导入的文档。默认情况下，Ember.js将CSS文件放在/assets中。应用程序样式存储在/assets/appname.css中。因此，样式中定义的所有相对URL都与构建输出中的/assets文件夹相关。简而言之：您不应将assets/添加到应用程序样式中使用的相对URL。

另一种选择是使用评论中建议的绝对URL，但如果我的问题是正确的，那么这不是您的选择（例如，因为应用程序未部署到文档根目录而是子文件夹）。