咨询EmberJS插件中引用CSS图片的标准实现方式

核心结论 #

你使用url(../my-addon/images/icon.png)的相对路径方式是正确且符合Ember插件构建规范的做法，这也是应对rootURL配置变化最可靠的方案。

原因解释 #

Ember插件的资源构建逻辑决定了这种路径的合理性：

• 插件public/目录下的文件（比如你的/my-addon/public/images/icon.png），最终会被复制到宿主应用构建产物dist/下的/my-addon/子目录中，也就是最终路径为dist/my-addon/images/icon.png。
• 插件的CSS文件会被合并到宿主应用的vendor.css中，该文件位于dist/assets/目录下，即最终路径为dist/assets/vendor.css。

从vendor.css的位置出发，要访问dist/my-addon/images/icon.png，就需要先向上跳出assets/目录（用../），再进入my-addon/images/目录，所以相对路径../my-addon/images/icon.png完全匹配资源实际位置。

为什么绝对路径不兼容rootURL #

你尝试的url(/my-addon/images/icon.png)是基于网站根目录的绝对路径，当宿主应用配置了非/的rootURL（比如/app/）时，浏览器会请求/my-addon/images/icon.png，但实际资源的真实路径应该是/app/my-addon/images/icon.png，所以会导致404错误。而相对路径是基于CSS文件的位置解析，不受rootURL配置的影响，适配性更强。

额外说明 #

目前Ember生态中，插件CSS引用图片并没有更特殊的标准方案——因为插件无法直接在CSS中使用Ember模板的{{rootURL}}变量来动态拼接路径，所以相对路径是最通用、最稳妥的选择。只要保持插件public/目录下的资源结构不变，这种引用方式就能在任何宿主应用中正常工作。

内容的提问来源于stack exchange，提问作者Alexandros K