Question

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

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

并且样式包含对图像的引用，例如

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

浏览器尝试在基本网址（http://localhost/bg.jpg）上找到bg.jpg而不是它，它应该在＆＃34; http://localhost/assets/plugins/test/img/＆＃34;中搜索该图像。

当Angular2在style标记之间插入样式时会发生这种情况。是否可以改为使用Angular2 <link rel="stylesheet" href="..."/>？

更新1

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

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

Angular2包括css图像路径

更新1

2 个答案: