Angular2 包含 css 图像路径

Posted 2023-02-22

【中文标题】Angular2 包含 css 图像路径

【英文标题】：Angular2 included css image path

【发布时间】：2016-06-15 02:16:07

【问题描述】：

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

@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”

【问题讨论】：

当您使用 F5 重新加载时，您的页面是否完全加载？另见***.com/questions/31415052/… 另见***.com/questions/34535163/…

其他一切正常

我仍然认为我提供的链接提供了解决方案。使用支持 pushState 的服务器或更改为 HashLocationStrategy 并在 bootstrap() 中添加 <base href="/"> 或等效提供程序

您需要使用图像的绝对路径（相对于基础）。在你的情况下assets/plugins/test/img/bg.jpg.

那么，如果我想包含一些带有图像的 css 的外部 jquery 插件，我将不得不手动修复图像路径？我认为手动将<link rel="stylesheet" href="..."/> 元素添加到ngViewLoaded 的标题是一种更好的方法。但是官方没有办法解决这个问题吗？

【参考方案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); 

【讨论】：

只有 Angular2 会使导入 jpeg 耗时。

绝对路径仅在您的 Angular 应用程序在域的根目录中运行时才有效。如果您的应用程序在 example.com/subdirectory/ 这样的子目录中运行，则此修复将不起作用

@FrancescoBorzi 如果我的应用位于子目录中，我该怎么办？

@Gilles 抱歉，我不知道，我不记得我是如何处理这个特定问题的

【参考方案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

【讨论】：

你在使用 webpack 吗？你能展示一下你的css使用的是什么加载器吗？

我必须更新我的 css 加载器。我正在使用原始加载程序，但它不起作用。我将加载器切换到“css-to-string-loader！css-loader”，现在一切正常。谢谢