Angular 2从资产文件夹加载CSS背景图像

Posted 2023-03-05

【中文标题】Angular 2从资产文件夹加载CSS背景图像

【英文标题】：Angular 2 Load CSS background-image from assets folder

【发布时间】：2017-08-05 18:13:26

【问题描述】：

我的文件夹结构是这样的

-myapp
    -assets
        -home-page-img
            -header-bg.jpg
    -src
        -app
        -home-page
            -home-page.component.css
            -home-page.component.html
            -home-page.component.ts

在我的 home-page.component.css 中，我有以下内容

header 
    width: 200px;
    height: 200px;
    background-image: url('/src/assets/home-page-img/header-bg.jpg');


My angular-cli.json
    "assets": [
    "assets",
    "favicon.ico"
]

当我运行代码时，我得到了

GET http://localhost:4200/src/assets/home-page-img/header-bg.jpg 404 (Not Found)

为了演示目的，如果我将背景图像更改为以下内容，我会得到一个完全不同的错误

background-image: url('assets/home-page-img/header-bg.jpg');

./src/app/home-page/home-page.component.css
Module not found: Error: Can't resolve './assets/home-page-img/header-bg.jpg' in '/Users/JohnSmith/Desktop/my-app/src/app/home-page'

我怎样才能加载该图像？

【问题讨论】：

查看图片在dist文件夹中的位置。你永远不应该访问 src 文件夹，无论如何它在生产版本中都不可用。

这是有道理的。但是，如果我引用 dist 文件夹，它会给我一个错误，因为 dist 文件夹在我运行 ng build --prod 之前不存在。

在你的 dist 中使用带有 ref 的相对路径。尝试 ../assets/home-page-img/header-bg.jpg 。这就是在我的 ionic 2 项目中对我有用的东西..

试试 background-image: url('../../assets/home-page-img/header-bg.jpg');

@Thyagu 成功了！谢谢。请提供答案，我可以投票给它

【参考方案1】：

我用它。 CSS 和 HTML 中的“assets/”总是以“/assets/”开头。我没有问题。 Angular 可以识别它。

CSS

.descriptionModal
    background-image: url("/assets/img/bg-compra.svg");

HTML

<img src="assets/img/ic-logoembajador-horizontal.svg" >

【讨论】：

这是我必须做的——当我将图像样式移动到“styles”文件夹中的 scss 工作表（组件的 scss 文件之外）时。我一直收到编译错误，直到我切换到双引号并刚刚从“/assets/....”开始路径

谢谢你，伙计！它帮助了我！

我使用 SCSS 将背景图像设置为 url(/assets/...)，当我构建时不显示错误，但在 WebStorm IDE 中显示此错误 cannot resolve file... 我尝试了 '...' 和 "..." 但仍然得到红色下划线。有什么办法可以消除烦人的错误吗？

或者只是background-image: url('~assets/img/background.svg');

这应该是公认的答案，它也涵盖了 CSS 和 html 的使用，并且它是一个绝对路径，因此您在移动源文件时不必更改它。

【参考方案2】：

试试

background-image: url('../../assets/home-page-img/header-bg.jpg');

【讨论】：

真的很有帮助。

最好使用@samuel-ivan (***.com/a/48890991/10447654) 答案，因为它使用绝对路径，它不会取决于您的文件夹结构。

@huanfeng 不行，路径不对可能会报错

【参考方案3】：

对于background-image: url(/assets/images/foo.png)，我还有一个i18n + base-href的问题，终于找到了workaround solution。

我的问题通过以下方式解决：

background-image: url(~src/assets/images/foo.png) 。

图片标签：

<img src="assets/images/foo.jpg" />

【讨论】：

太棒了！我只是在找这个。我也在使用 i18n

我正在使用 --base-href，这是唯一一个可以使用 base-href 并且没有它的。

【参考方案4】：

揭开 CSS 文件中资源的 Angular 路径的神秘面纱

这没有记录，据我所知也没有任何人写过它。

Angular 11 确实如此，但肯定已经存在了一段时间。

（注意：在 ng build 中设置 --base-href 或 --deploy-url 对以下内容没有影响）。

在css文件中包含资产的常规方式，例如：

背景图片：url(/assets/someImage.png);

带有前导斜杠。在构建过程中（ng serve 或 ng build），如果 angular 看到前导斜杠，它将忽略该路径，这意味着它将按原样复制它。所以浏览器会看到路径'/assets/someImage.png'，并会从根目录开始寻找那个文件，或者我们称之为域。 （注意：CSS 中的路径是相对于 CSS 文件的位置的，但即使在 CSS 中，前导斜杠也意味着查找从根目录开始的文件）。 Angular 假设您将该文件放在默认 assets 文件夹中，其内容将按原样复制到 dist 文件夹中，并且默认位于根目录中，因此 someDomain.com/assets/someImage.png 可以正常工作。

但是，如果由于某种原因您试图做其他事情，并且您删除了该斜线，那么一个全新的过程正在发生。例如，假设你现在写

背景图片：url(assets/someImage.png);

没有斜线。 （例如，当您将应用程序部署到域“someDomain.com/some-folder/”中的内部文件夹时，资产位于该文件夹中。使用斜线，它将在根目录中查找资产，但它不存在，它在某个文件夹中。因此您删除斜线认为它也会按原样复制该代码并从 css 文件所在的位置查找资产，这就是浏览器将执行的操作）。

惊喜！ 这次 Angular 并没有忽略那个文件路径！！它在构建期间寻找它！但这并不好，你会得到那个恼人的错误，说 angular 找不到那个文件。 所以你要做的是重写那个路径，直到 angular 可以找到它（在你的文件系统中），例如：如果你在一个深度嵌套的组件中

背景图片：url(../../../../assets/someImage.png);

然后，繁荣，它工作，但看看你的 dist 文件夹和你的 CSS 代码发生了什么。 Angular 制作了 someImage.png 文件的两个副本。一个在常规资产文件夹中，另一个在根目录中，就在所有 js 包旁边。在你的 CSS 文件中

背景图片：url(../../../../assets/someImage.png);

将被改写为

背景图片：url(someImage.png);

这可行，但不是很好的 dist 文件夹结构。 对于注入到 index.html 或 shadowRoot (ViewEncapsulation.shadowDom) 的全局 style.css 或组件样式，此行为器是相同的

（注意：在 html 模板中没有检查或重写）

【讨论】：

嗨@gidon，非常感谢您的解释。但是如果我们的资产是从子文件夹提供的，我们如何在 css 中配置 url，以便从子文件夹加载它，并且图像不会在 dist 文件夹中复制两次？

@lincetto 在 css 文件中始终以斜杠开头。因此，如果图像位于 assets/some_subfolder 中，则路径为：background-image:url(/assets/some_subfolder/someImage.png);。如果你想要一个不同位置的文件夹，你可以编辑 angular.json 中的 assets 属性，并用斜杠从 css 指向该文件夹。

谢谢，这很有帮助！

【参考方案5】：

我们可以使用相对路径代替绝对路径：

.logo
  background-image: url('assets/home-page-img/header-bg.jpg');

或

.logo
  background-image: url('~src/assets/home-page-img/header-bg.jpg');

【讨论】：

不知道为什么这不是第一答案。

谢谢@numerical25

【参考方案6】：

Angular 9+这对我有用。

.main-bg
  background-image: url("src/assets/main-bg.png");

【参考方案7】：

尝试在下面使用这个：

background-image: url('./../assets/home-page-img/header-bg.jpg');

【参考方案8】：

我的问题通过以下方式解决：

背景图片：url(~src/assets/images/foo.png) .

与 Hieu Tran AGI

相同

【参考方案9】：

您应该修复文件路径。我的问题解决了：

background-image: url('../assets/img/logo.jpg')

【参考方案10】：

@Samuel Ivan 的回答对我不起作用。也许是因为我正在开发一个国际化项目。最后，^ 帮助我

.descriptionModal
    background-image: url("^assets/img/bg-compra.svg");

而答案来自https://github.com/angular/angular-cli/issues/12797