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

时间:2019-04-16 09:18:37

标签: javascript ember.js gruntjs ember-cli

我正在尝试使用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-运行正常

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

1 个答案:

答案 0 :(得分:0)

不带反斜杠/的URL是CSS中的相对URL,也是从HTML已知的。该URL是相对于CSS文件的位置而言的,而不是相对于导入CSS文件的文档而言的。默认情况下,Ember.js将CSS文件放入/assets中进行构建。应用程序样式存储在/assets/appname.css中。因此,所有以样式定义的相对URL均相对于构建输出中的/assets文件夹。长话短说:您不应该在应用程序样式中使用的相对URL中添加assets/

另一种选择是使用注释中建议的绝对URL,但是如果我对您的问题没问题,那么这不是您的选择(例如,导致应用未部署到文档根目录,而是子文件夹)。