Question

我的文件夹结构如

-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'

如何加载该图片？

Answer 1

尝试

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

Answer 2

我用它。始终以＆＃34; / assets /＆＃34;开头;在CSS和HTML＆＃34; assets /＆＃34;。我没有问题。 Angular认识到它。

CSS

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

HTML

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

Answer 3

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

CanLoad

或

Observable

Answer 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 文件夹中，who 的内容将按原样复制到dist 文件夹中，并且默认情况下位于根目录中，因此someDomain.com/assets/someImage.png 可以正常工作。

但是，如果由于某种原因您尝试做其他事情，而您删除了斜线，则会发生全新的过程。例如，假设你现在写

<块引用>

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

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

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

<块引用>

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

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

<块引用>

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

将被改写为

<块引用>

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

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

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

Answer 5

对于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" />

Answer 6

Angular 9+ 这对我有用。

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

Answer 7

尝试在下面使用它：

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

Answer 8

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

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

同Hieu Tran AGI

Answer 9

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

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

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

9 个答案: