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

引用:"那些最终在DOM中的位置？好吧,出于与前面解释的相同的原因,它们被写入文档的头部.但不仅如此,当Angular获取样式资源时,它需要文本响应,内联并在所有组件内联样式后附加它们."

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

当<link rel="stylesheet" href="..."/>在标题中使用时,看到此线程CSS文件路径无法正确解析角度ng-view,必须预先修复' / '

<link rel="stylesheet" href="/styles/main.css"/> 代替 <link rel="stylesheet" href="styles/main.css"/>

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

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

代替

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