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

【问题标题】：Dynamically added assets prefix in the image URL - Ember-CLI在图像 URL 中动态添加资产前缀 - Ember-CLI
【发布时间】：2019-04-16 09:18:36
【问题描述】：

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

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

重定向到

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

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

在 URL 的前缀中添加 '/' 时，可以在应用程序中看到图像。

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

重定向到

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

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

【问题讨论】：

/assets/images/image.svg 有什么问题？你把 SVG 放在哪里了？
如果您查看指南cli.emberjs.com/release/advanced-use/asset-compilation，您会发现在从 css 引用资产时，规定的方式是使用绝对路径
您自己提供了如何避免两个资产名称的答案。你还期待什么？

标签： javascript ember.js gruntjs ember-cli

【解决方案1】：

没有前导斜杠/ 的 URL 是 CSS 中的相对 URL，在 HTML 中也是如此。 URL 与 CSS 文件的位置相关，而不是与导入 CSS 文件的文档相关。Ember.js 默认将 CSS 文件放在 /assets 中。应用程序样式存储在/assets/appname.css 中。因此，样式中定义的所有相对 URL 都相对于构建输出中的 /assets 文件夹。长话短说：您不应该将 assets/ 添加到应用程序样式中使用的相对 URL。

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

【讨论】：