Angular2 包含 css 图像路径

Question

当我像这样在组件中包含样式时：

@Component({
    styleUrls: [
         "assets/plugins/test/css/style.css"
    ],
    encapsulation: ViewEncapsulation.None
})

当样式包含对图像的引用时，例如

.sample { background-image: url(../img/bg.jpg); }

浏览器尝试在基本 url (http://localhost/bg.jpg) 上查找 bg.jpg 而不是那样，它应该在“http://localhost/assets/plugins/test/img/”中搜索该图像。

当 Angular2 在 style 标签之间插入样式时，就会发生这种情况。是否可以让Angular2插入<link rel="stylesheet" href="..."/>？

更新 1

Plunker：http://plnkr.co/edit/SHJzVHOyTuLu106r6tpD 打开浏览器开发者控制台并搜索“bg.jpg”

Answer 1

在此博客中发布了 angular2 中的样式如何相互覆盖http://blog.thoughtram.io/angular/2015/06/25/styling-angular-2-components.html

引用：“这些最终在 DOM 中的什么位置？嗯，出于与前面解释的相同的原因，它们被写入文档的头部。但不仅如此，当 Angular 获取样式资源时，它接受文本响应、内联并将它们附加到所有组件内联样式之后。”

模板内联样式在 Angular2 中具有最高优先级

在标题中使用<link rel="stylesheet" href="..."/> 时，请参阅此线程CSS file paths are not resolving properly with angular ng-view，必须有一个前缀'/'

<link rel="stylesheet" href="/styles/main.css"/> 而不是<link rel="stylesheet" href="styles/main.css"/>

在这个帖子里有额外的解释Load external css style into Angular 2 Component

Three Ways to Insert CSS

也许最简单的解决方法是在 css 中插入 完整路径

.sample { background-image: url(/assets/plugins/test/img/bg.jpg); }

而不是

.sample { background-image: url(../img/bg.jpg); }

Answer 2

你应该根据你的应用程序的基本路径加载/导入css文件中的数据（你可以添加<base href="YOUR_APP_DIRECTORY_PATH" />作为index.html的头标签的第一个孩子以保持一致性）像这样

body{
background:url(img/img.jpg);
}

Your Directory Structure should be like this
../
   ../
     YOUR_APP_DIRECTORY/
                        img/
                             Your Images